80s Fonts Text Effect 7: CSS Hauser Font Chrome Text Effect

80s-fonts-text-effect-7-css-hauser-font-chrome-text-effect.markdown

80s Fonts Text Effect 7: CSS Hauser 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="hauser" data-text="HAUSER">HAUSER</div></div>


<svg>
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="backGradientFill">
            <stop offset="0%" style="stop-color: #191c2b; stop-opacity: 100%;" />
      <stop offset="25%" style="stop-color: #191c2b; stop-opacity: 100%;" />
      <stop offset="48%" style="stop-color: #191c2b; stop-opacity: 100%;" />
      <stop offset="75%" style="stop-color: #949ec0; stop-opacity: 100%;" />
      <stop offset="80%" style="stop-color: #b0cefd; stop-opacity: 100%;" />
      
      <stop offset="100%" style="stop-color: white; stop-opacity: 0%;" />
        </linearGradient>
    
    <linearGradient x1="50%" y1="100%" x2="50%" y2="-10%" id="frontGradientFill">
            <stop offset="0%" style="stop-color: white; stop-opacity: 100%;" />
      <stop offset="5%" style="stop-color: white; stop-opacity: 100%;" />
      <stop offset="17%" style="stop-color: #cfe1fd; stop-opacity: 100%;" />
      <stop offset="22%" style="stop-color: #949ec0; stop-opacity: 100%;" />
      <stop offset="26%" style="stop-color: #191c2b; stop-opacity: 100%;" />
      <stop offset="28%" style="stop-color: #191c2b; stop-opacity: 100%;" />
      <stop offset="30%" style="stop-color: white; stop-opacity: 100%;" />
      <stop offset="40%" style="stop-color: white; stop-opacity: 100%;" />
      <stop offset="50%" style="stop-color: #191c2b; stop-opacity: 100%;" />
        </linearGradient>
    
    <linearGradient x1="50%" y1="25%" x2="50%" y2="90%" id="strokeGradientFill">
      <stop offset="0%" style="stop-color: white; stop-opacity: 100%;" />    
      <stop offset="25%" style="stop-color: white; stop-opacity: 100%;" />
      <stop offset="35%" style="stop-color: #8ae7ee; stop-opacity: 100%;" />
      <stop offset="59%" style="stop-color: #485790; stop-opacity: 100%;" />
      <stop offset="80%" style="stop-color: #8ae7ee; stop-opacity: 100%;" />
      <stop offset="100%" style="stop-color: white; stop-opacity: 0%;" />
        </linearGradient>

    <rect id="gradient1" x="0%" y="10%" width="100%" height="55%" style="fill: url(#backGradientFill);" />
    <rect id="gradient2" x="0%" y="0" width="100%" height="100%" style="fill: url(#frontGradientFill);" />
    <rect id="gradient3" x="0%" y="0" width="100%" height="100%" style="fill: url(#strokeGradientFill);" />
      
    <filter id="backGradient">
      <feImage xlink:href="#gradient1" result="grad"/>
      <feComposite operator="atop" in2="SourceGraphic" in="thickened" result="stroke"/>
      <feMerge>
        
        <feMergeNode in="sourceGraphic"></feMergeNode>
        <feMergeNode in="stroke"></feMergeNode>
      </feMerge>
    </filter>
    <filter id="frontGradient">
            <feImage xlink:href="#gradient2" result="grad"/>
      <feTurbulence type="fractalNoise" baseFrequency="0.07"
        numOctaves="1" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="grad"
        scale="10" />
            <feComposite operator="in" in2="SourceGraphic" in="thickened" result="stroke"/>
        </filter>
    
        <filter id="stroke">    
<!--           <feFlood  flood-color="#dadde5" result="strokeColor" /> -->        <feImage xlink:href="#gradient3" result="strokeColor"/>
          <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"/>
          <feComposite operator="in" in="strokeColor" in2="stroke" result="stroke"/>
          <feMerge>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            <feMergeNode in="stroke"></feMergeNode>
          </feMerge>
          
        </filter>    
    
    <filter id="innerGlow" >
    <feFlood flood-color="#c45cff"/>
    <feComposite in2="SourceGraphic" operator="out"/>
    <feGaussianBlur stdDeviation="5" result="blur"/>
    <feComposite operator="atop" in2="SourceGraphic" result="glow"/>
      <feBlend in="SourceGraphic" in2="glow" mode="screen"></feBlend>
</filter>
    
    <filter id="outerGlow" >
		<!-- Thicken out the original shape -->
		<feMorphology operator="dilate" radius="10" in="SourceAlpha" result="thicken" />

		<!-- Use a gaussian blur to create the soft blurriness of the glow -->
		<feGaussianBlur in="thicken" stdDeviation="20" result="blurred" />

		<!-- Change the colour -->
		<feFlood  flood-color="#395086" 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:black;  
  filter:url(#noise) contrast(110%);
}

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

.hauser{
  
  color:white;
  font-family:'Hauser';
  font-size:40vh;
  padding:0 1em;
  filter:url(#outerGlow);
}

.hauser:after{
  content:attr(data-text);
  position:absolute;
  left:0;
  padding:0 1em;
  filter: url(#frontGradient) url(#backGradient) url(#innerGlow) url(#stroke);
}

styles

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

don't work first gradient

please note that depending on browser support some effects work more or less accurate. the effects should work find on chrome latest version

Chrome 79.0.3945.130

I made a modification to the codepen (frontGradientFill) and it should look good now