Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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" />
@pointofpresence

This comment has been minimized.

Copy link

pointofpresence commented Feb 26, 2020

don't work first gradient

@codingdudecom

This comment has been minimized.

Copy link
Owner Author

codingdudecom commented Feb 27, 2020

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

@pointofpresence

This comment has been minimized.

Copy link

pointofpresence commented Feb 27, 2020

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

@codingdudecom

This comment has been minimized.

Copy link
Owner Author

codingdudecom commented Feb 27, 2020

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
You can’t perform that action at this time.