Stranger Things Font Generator Stranger Things Text Generator

The TV series Stranger Things 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

Source Code: Github Gist

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

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.

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

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.

You can also try the EB Garamond 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 use.

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 is a great online text effect generator and 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 in Mockofun.