SVG filters are a very powerful, but a bit obscure tool. You can reference SVG filters from CSS and you can even combine multiple SVG filters. In this post I’ve used SVG filters and 80s fonts to create a few 80s text effects.

You can find the source code for each of the 80s font text effects in the codepens from the link. Please note that I’ve used a couple of free 80s fonts. You can download the fonts from the links below, but you will have to use a tool for converting from TTF to web fonts (I’ve used Transfonter and Web Font Generator)

My inspiration for these text effects came from Photoshop text effects like the ones from Indieground. If you like the 80s fonts and text effects, check out this awesome post about 80s Font Text Effects and Modern Retro Design (or synthwave outrun design) from PSDDude. You’ll find more free fonts and text effects from 80s movies, video games, music albums, etc.

So, are you curious to see how to make text effects like in Photoshop using CSS and SVG filters?

Check these out:

1. CSS SVG Filters – Commando Font Fake Chrome Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Commando

Description: This fake chrome text effect is made using svg filters and CSS. There’s a CSS text bevel SVG filter to give the raised text effect. The chrome look is given using a CSS linear gradient. For a final touch I used a noise SVG filter. I’ve re-used the noise SVG filter several times for the other text effects as well. If you want to know more about the chrome effect in 80s design, check out this awesome article from PSDDude about 80s fonts.

2. CSS SVG Filters – Road Rage Font Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Road Rage

Description: The Road Rage font is quite a beautiful example of retro typography. It gives that 80s look to any design that you place it on. The soft outer glow SVG filter I used is achieved in 2 steps: first expand the source image using feMorphology and then a Gaussian blur using feGaussianBlur. The result is filled with a color and is combined back with the original.

3. CSS SVG Filters – Indelible Font 80s Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Indelible

Description: Simple, but beautiful. This text effect is almost like a fake anaglyph SVG filter. I’m just expanding and offsetting the text by a couple of pixels. What I get I fill in with a color and then combine the original with what I get by placing the colored copy underneath the original. Check out the code and the use of feMerge that merges the 2 results in the specified order.

4. CSS SVG Filters – Cyberspace Raceway Font Space Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Cyberspace Raceway

Description: The blur SVG filter is similar to the CSS blur transform. The difference is that the blur SVG filter is more powerful because it allows indicating the blur size on the horizontal and on the vertical. In this way you can create some really cool motion blur SVG filters. I added the star trails CSS animation to enhance the effect.

5. CSS SVG Filters – 80s Neon Font Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Neon 80s

Description: The neon text effect is a staple of 80s design. I’ve made this neon SVG filter text effect in a incremental of steps. As you can see in the code in the CSS class .neon I’ve used multiple SVG filters. This feature allows you to build up very complex effects. First I’m applying a stroke SVG filter, then an inner glow SVG filter. Each time, the SVG filter is added to the result of the previous SVG filter.

Finally I’ve added 2 outer glow SVG filters: one smaller and one larger to create a realistic neon text effect.

If you want to know more about the neon in 80s design, check out this awesome article from PSDDude about 80s fonts.

6. CSS SVG Filters – Rocket Rinder Font Chrome Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Rocket Rinder

Description: I really love the way this chrome SVG filter text effect. It’s made up of a back chrome gradient. I’ve added a CSS text bevel SVG filter effect on top. Then another chrome gradient (different from the one in the back). In this way I’m creating a really cool metal look. To finish it up I’m also adding an outer glow SVG filter and an beautiful bloom effect. The bloom SVG filter works by simply making a copy of the entire graphics, applying a faint blur and then using screen to blend it on top of the original.

The name “Rocket Rinder”, which sounds like a really cool gamer nickname. Give this awesome online nickname generator a try, if you want to generate a cool nickname for yourself.

7. CSS SVG Filters – Hauser Font Realistic Chrome Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Hauser

Description: This is probably my favorite chrome SVG filter. It’s similar to the other CSS chrome text effects that make use of gradients. The big difference here is that I used 2 gradients and one of them is a distorted gradient (the frontGradient). To distort the gradient and achieve that chrome reflection that look like mountains on the horizon I used the feTurbulence in the SVG filter.

8. CSS SVG Filters – Lazer 84 Font with Fake Halftone Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Lazer 84

Description: This SVG filter combines several techniques used for the other text effects. The special thing about the Lazer 84 text effect is the fake halftone texture. I simply defined a small circle in SVG and transformed it into a dotted texture using feTile. Because I did not want the texture to go over the entire text I used a mask made up with the feTurbulence node to give me that random distribution. Because I wanted sharp edges for the mask I used a sort of a threshold technique with feComponentTransfer and a discrete function on the alpha channel. Using feOffset I moved the fake halftone texture to go over the edge of the text. This gives it more of a printed look. Then I created a duplicate of the halftone texture and gave it a slightly darker shade, placing it under the initial texture. This gives it a bit of a raised effect.

Finally I piled up a couple of colored copies of the original text for the raised 3d SVG filter text effect. And a couple of blurred lines in the background to finish up this 80s text effect.

9. CSS SVG Filters – Kabel Black and Streamster Font Chrome & Neon Text Effect

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Kabel Black and Streamster

Description: I originally made this in Photoshop for the 80s fonts article on PSDDude. Though Photoshop will always allow more flexibility I really liked how this turned out. Because these are CSS SVG filters you can easily modify the text as needed, while in Photoshop you would have to remake and re-save the image.

What is special about this chrome and neon SVG filter is the diffuse light spot reflection on top of the 80s letters. To achieve this I created a SVG circle on top of the text and then blurred it. Using feComposite I made the reflection only appear on the text. The effect created makes it seem like the neon text is reflected off the chrome text.

10. CSS SVG Filters – Stranger Things Text Effect with Free 80s Font Eighties Horror

Demo: Coding Dude CodePen SVG Filters

Source Code: Github Gist

80s Font Free Download: Eighties Horror (replacement for ITC Benguiat)

Description: 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.

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.

The Stranger Things CSS SVG filter text effect I made uses the same stroke SVG filter as for some of the other text effects above. In addition I’m using the feSpecularLighting which emulates lighting effects in SVG filters. It is used most of the time for CSS text bevel and emboss, but in this case I’m using it to add the glare lights on the edges of the text.

Online 80s Text Generator

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.

Quick note before you go:

I’ve recently published an extensive list on MockoFun with +50 free Christmas fonts that you can use online. Check out that list and experiment with those fonts and the SVG filters listed above.

And, if you are into typography, you should also check out an awesome list of 25 free cake fonts also on MockoFun.

Conclusion: SVG Filters Are Cool!

I hope that you enjoyed this list. I did not want to get too much in depth with explaining SVG filters line by line because often, SVG filters are about experimenting. Imagine for example creating a name design using this effects. Please note that some of the features of SVG filters are not supported on all browsers, therefore the demo links might not work as expected. I’ve made the text effects on Chrome running on Windows.

If you have any questions, please drop me a comment below.