80s Fonts Text Effect 5: CSS Neon Font Text Effect

80s-fonts-text-effect-5-css-neon-font-text-effect.markdown

80s Fonts Text Effect 5: CSS Neon Font Text Effect

Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on http://www.coding-dude.com/wp/css/svg-filters/

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<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>

style.css

: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);
}

styles

<link href="https://www.coding-dude.com/fonts/neon80s-stylesheet.css" rel="stylesheet" />