Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
80s Fonts Text Effect 5: CSS Neon Font Text Effect
<div class="centered"><div class="neon">80s Neon Text</div></div>
<svg >
<defs>
<filter id="stroke">
<feMorphology operator="dilate" radius="1"
in="SourceGraphic" result="outside" />
<feMorphology operator="dilate" radius="2"
in="outside" result="thickened" />
<feComposite operator="out" in2="SourceGraphic" in="thickened" result="stroke"/>
</filter>
<filter id="inner-glow" >
<feFlood flood-color="#e10b8d"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="0.5" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
<filter id="outer-glow" >
<!-- Thicken out the original shape -->
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
<!-- Use a gaussian blur to create the soft blurriness of the glow -->
<feGaussianBlur in="thicken" stdDeviation="5" result="blurred" />
<!-- Change the colour -->
<feFlood flood-color="#db0273" result="glowColor" />
<!-- Color in the glows -->
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
<!-- Layer the effects together -->
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="outer-glow1" >
<!-- Thicken out the original shape -->
<feMorphology operator="dilate" radius="20" in="SourceAlpha" result="thicken" />
<!-- Use a gaussian blur to create the soft blurriness of the glow -->
<feGaussianBlur in="thicken" stdDeviation="25" result="blurred" />
<!-- Change the colour -->
<feFlood flood-color="#530139" result="glowColor" />
<!-- Color in the glows -->
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
<!-- Layer the effects together -->
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
:root{
background:#000106;
}
.centered{
position:absolute;
left:50vw;
top:50vh;
transform:translateX(-50%) translateY(-50%) rotateX(15deg);
text-align:center;
}
.neon{
font-family:'Neon 80s';
font-size:5rem;
color:#ffedff;
padding:30px;
filter:url(#stroke) url(#inner-glow) url(#outer-glow) url(#outer-glow1);
}
<link href="https://www.coding-dude.com/fonts/neon80s-stylesheet.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.