Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save codingdudecom/1b219d915cfd4c2917a0be45b3cbcdda to your computer and use it in GitHub Desktop.
Save codingdudecom/1b219d915cfd4c2917a0be45b3cbcdda to your computer and use it in GitHub Desktop.
80s Fonts Text Effect 7: CSS Hauser Font Chrome Text Effect
<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>
: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);
}
<link href="https://www.coding-dude.com/fonts/hauser-styles.css" rel="stylesheet" />
@codingdudecom
Copy link
Author

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

@pointofpresence
Copy link

2020-02-27_12-57-49
Chrome 79.0.3945.130

@codingdudecom
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment