Stranger Things Text Generator
Tags: css, strangerthings, textgenerator, svg
Published: 2020-04-29 07:59:33

The TV series [Stranger Things](https://www.netflix.com/title/80057281) is quite a treat for those with nostalgia for the 80s (me included). The original *Stranger Things title* effect was made using techniques from the 80s which involve a photographic film on which the text was transferred and a light was shone behind it.

# Using CSS & SVG Filters #

CodePen: [SVG Filters](https://codepen.io/inegoita/pen/RXWWMZ)

Source Code: [Github Gist](https://gist.github.com/codingdudecom/b90e3b9b67e8a504980a1a24541a9df1)

With a combination of CSS and SVG filters you can easily use this effect as a **Stranger Things Text Generator**.

The Stranger Things CSS SVG filter text effect is part of a series of 80s text effects I made a while back.


## [80s Font Generator](http://www.coding-dude.com/wp/css/svg-filters/) ##
![80s text effects](https://dev-to-uploads.s3.amazonaws.com/i/az4opdt3leefvtjh6sl5.jpg)

Inside the SVG filter I’m using multiple `feSpecularLighting` which emulates lighting effects in SVG filters. It is used most of the time for bevel and emboss, but in this case I’m using it to add the glare lights on the edges of the text. I'm then combining the specular effect using `feComposite`.

<pre><code>&lt;feSpecularLighting surfaceScale="1" specularConstant="5" 
	specularExponent="40" lighting-color="#ea886d" 
		in="BLUR" result="SPECULAR"&gt;
    &lt;fePointLight x="100" y="0" z="400" /&gt;
&lt;/feSpecularLighting&gt;
&lt;feSpecularLighting surfaceScale="1" specularConstant="10" 
	specularExponent="50" lighting-color="#ea886d" in="BLUR" 
	result="SPECULAR1"&gt;
    &lt;fePointLight x="1000" y="0" z="500" /&gt;
&lt;/feSpecularLighting&gt;
&lt;feSpecularLighting surfaceScale="1" specularConstant="3" 
	specularExponent="100" lighting-color="#dd7170" in="BLUR" 
	result="SPECULAR2"&gt;
    &lt;fePointLight x="100" y="100" z="1000" /&gt;
&lt;/feSpecularLighting&gt;</code></pre>

# Fonts Used #

The fonts used are a clear tribute to the ITC Benguiat font, which was widely used and often associated with Stephen King novel covers. Since the ITC Benguiat is a commercial font, I though I’d better use a free font that is similar to it – the [Eighties Horror font](https://www.fontspace.com/darrell-flood/eighties-horror).

You can also try the [EB Garamond](https://fonts.google.com/specimen/EB+Garamond?preview.text=STRANGER+THINGS&preview.text_type=custom) web font available in Google Fonts.

I did a lot of research on 80s aesthetics and the ITC Benguiat font is quite a proeminent presence in 80s typography. You can read more in this article about [80s font](http://www.psd-dude.com/tutorials/resources/80s-font.aspx) use. 

![80s font](https://dev-to-uploads.s3.amazonaws.com/i/pwoh3vw4h8wu3rpkmxx1.jpg)

# Online Text Generators #

This kind of SVG filters use can be very useful if you want to create all sort of text generators. For example [Mockofun](https://www.mockofun.com/) is a great [online text effect generator](https://www.mockofun.com/text-editor/) and [photo editor](https://www.mockofun.com/photo-editor/).

With over 800 fonts available, hundreds of pre-made text effects and all the main functions of Photoshop, it was not to difficult to make this [Stranger Things text generator](https://www.mockofun.com/template/stranger-things-text-generator/) in Mockofun.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nklpzu1h9h0dk6eyhkar.gif)