Skip to content

Instantly share code, notes, and snippets.

  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
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>
<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 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 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%;" />
<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"/>
<feMergeNode in="sourceGraphic"></feMergeNode>
<feMergeNode in="stroke"></feMergeNode>
<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 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"/>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="stroke"></feMergeNode>
<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 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 -->
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
<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>
<feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image"/>
filter:url(#noise) contrast(110%);
transform:translateX(-50%) translateY(-50%);
padding:0 1em;
padding:0 1em;
filter: url(#frontGradient) url(#backGradient) url(#innerGlow) url(#stroke);
<link href="" rel="stylesheet" />
Copy link

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

Copy link

Chrome 79.0.3945.130

Copy link

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