80s Fonts Text Effect 9: CSS Kabel Black & Streamster Font Chrome Text Effect

80s-fonts-text-effect-9-css-kabel-black-streamster-font-chrome-text-effect.markdown

80s Fonts Text Effect 9: CSS Kabel Black & Streamster Font Chrome 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="streamster">CSS Text Effect</div><div class="kabel-black big">80s</div><div class="kabel-black">FONTS</div></div>

<svg>
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="insideGradientFill">
            <stop offset="0%" style="stop-color: #2989cc; stop-opacity: 100%;" />
            <stop offset="50%" style="stop-color: #d3e5ec; stop-opacity: 100%;" />
          <stop offset="51%" style="stop-color: #592451; stop-opacity: 100%;" />
          <stop offset="55%" style="stop-color: #b3628d; stop-opacity: 0%;" />
          <stop offset="59%" style="stop-color: #592451; stop-opacity: 100%;" />
          <stop offset="65%" style="stop-color: #b3628d; stop-opacity: 100%;" />
      <stop offset="75%" style="stop-color: #ac86a6; stop-opacity: 100%;" />
      <stop offset="100%" style="stop-color: #b3628d; stop-opacity: 100%;" />
      </linearGradient>
    <linearGradient id="repeatingGradient" xlink:href="#insideGradientFill" spreadMethod="repeat" />
    <rect id="insideGradient" x="0%" y="0" width="100%" height="100%" style="fill: url(#repeatingGradient);" />
    
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="borderGradientFill">
            <stop offset="0%" style="stop-color: #3b94d1; stop-opacity: 100%;" />
      <stop offset="22%" style="stop-color: #cfe5ec; stop-opacity: 100%;" />
      <stop offset="40%" style="stop-color: #3b94d1; stop-opacity: 100%;" />
      <stop offset="60%" style="stop-color: #cfe5ec; stop-opacity: 100%;" />
      <stop offset="80%" style="stop-color: #3b94d1; stop-opacity: 100%;" />
      <stop offset="100%" style="stop-color: #cfe5ec; stop-opacity: 100%;" />
    </linearGradient>
    <linearGradient id="repeatingBorderGradient" xlink:href="#borderGradientFill" spreadMethod="repeat" />
    <rect id="borderGradient" x="0%" y="0" width="100%" height="100%" style="fill: url(#repeatingBorderGradient);" />
    
    
    <circle id="diffuseLightSpot" cx="50%" cy="50%" r="25%" fill="#ff11ff"/>
    
    <filter id="chrome" >
      <feImage result="rect" xlink:href="#insideGradient"></feImage>
      <feImage result="rect1" xlink:href="#borderGradient"></feImage>
      
      
      <feComposite in2="SourceGraphic" in="rect" operator="in" result="insideGradient"></feComposite>
      <feMorphology operator="dilate" radius="5" 
in="SourceGraphic" result="edge"/>
      <feGaussianBlur stdDeviation="10" in="edge" result="BLUR"/>
<feSpecularLighting surfaceScale="2"   specularConstant="1" specularExponent="10" lighting-color="white" in="BLUR" result="SPECULAR">
    <fePointLight x="400" y="0" z="500" />
</feSpecularLighting>
          <!-- We cut off the parts that overlap the source graphic… -->

        <feComposite operator="in" in="SPECULAR" in2="edge" result="beveledEdge"/>
      
      <feComposite in2="beveledEdge" in="rect1" operator="in" result="borderGradient"></feComposite>
      
      
      
      <feMerge>
        
        <feMergeNode in="borderGradient"></feMergeNode>
        <feMergeNode in="insideGradient"></feMergeNode>
      </feMerge>
    </filter>
    
    <filter id="reflection">
      <feImage x="100" y ="-60" width="100%" height="100%" xlink:href="#diffuseLightSpot" result="diff"></feImage>
      <feGaussianBlur in="diff" stdDeviation="15" result="diff1"></feGaussianBlur>
      <feComposite in="diff1" in2="SourceGraphic" operator="in" result="diff2"></feComposite>
      <feMerge>
        <feMergeNode in="SourceGraphic"></feMergeNode>
        <feMergeNode in="diff2"></feMergeNode>
      </feMerge>
    </filter>
    
    <filter id="bevel">
            <feGaussianBlur stdDeviation="1" in="SourceGraphic" result="BLUR"/>
<feSpecularLighting surfaceScale="1" specularConstant="1" specularExponent="50" lighting-color="#white" in="BLUR" result="SPECULAR">
    <fePointLight x="300" y="0" z="100" />
</feSpecularLighting>
          <!-- We cut off the parts that overlap the source graphic… -->

<feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>

<!-- … and then merge source graphic and lighting effect: -->

<feMerge>
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="COMPOSITE"/>
</feMerge>
        </filter>
    
    <filter id="outerGlow" >
		<!-- 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="#ff11ff" 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="noise" x="0vw" y="0vh" width="100vw" height="100vh">
      <feFlood flood-color="#808080" result="neutral-gray" />      
      <feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.8" numOctaves="10" stitchTiles="stitch" result="noise"/>
      <feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix>
      <feComponentTransfer in="desaturatedNoise" result="theNoise">
        <feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA>
      </feComponentTransfer>
      <feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image"/>      
    </filter> 
  </defs>
</svg>

style.css

:root{
  background:#1c0d2e;
}
:root:after{
  content:' ';
  position:absolute;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  filter:url(#noise);
}

.centered{
  position:absolute;
  left:50vw;
  top:50vh;
  transform:translateX(-50%) translateY(-50%);
  text-align:center;
}

.streamster{
  color:magenta;
  font-family:'Streamster';
  font-size:30pt;
  filter:url(#bevel) url(#outerGlow);
  transform:translateY(10pt) rotate(-10deg);
  z-index:999;
  position:relative;
}
.kabel-black{
  position:relateive;
  font-family:'Kabel Black';
  font-size:75pt;
  
  min-width:300px;
  line-height:0.9em;
  letter-spacing:10px;
  padding:0 1em;
  color:white;
  filter:url(#chrome);
}

.kabel-black.big{
  font-size:150pt;
  padding:0 1vh;
  filter:url(#chrome) url(#reflection) brightness(250%);
}

styles

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