Skip to content

Instantly share code, notes, and snippets.

  • Star 2 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
What would you like to do?
80s Fonts Text Effect 6: CSS Rocket Rinder Font Chrome Text Effect
<div class="centered"><div class="rocketrinder">Rocket<br/> Rinder</div></div>
<linearGradient x1="50%" y1="0%" x2="100%" y2="100%" id="backGradientFill">
<stop offset="0%" style="stop-color: #a299b6; stop-opacity: 100%;" />
<stop offset="30%" style="stop-color: #ffffff; stop-opacity: 100%;" />
<stop offset="45%" style="stop-color: #9991ae; stop-opacity: 100%;" />
<stop offset="60%" style="stop-color: #a299b6; stop-opacity: 0%;" />
<stop offset="75%" style="stop-color: #ffffff; stop-opacity: 100%;" />
<stop offset="100%" style="stop-color: #a299b6; stop-opacity: 100%;" />
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="frontGradientFill">
<stop offset="0%" style="stop-color: black; stop-opacity: 100%;" />
<stop offset="15%" style="stop-color: #34304b; stop-opacity: 100%;" />
<stop offset="25%" style="stop-color: #c3b9d5; stop-opacity: 100%;" />
<stop offset="35%" style="stop-color: white; stop-opacity: 100%;" />
<stop offset="85%" style="stop-color: white; stop-opacity: 100%;" />
<stop offset="90%" style="stop-color: #c3b9d5; stop-opacity: 100%;" />
<stop offset="100%" style="stop-color: #211c35; stop-opacity: 100%;" />
<!-- Create a rectangle and apply the gradient as its fill -->
<rect id="gradient1" x="0%" y="0" width="100%" height="100%" style="fill: url(#backGradientFill);" />
<rect id="gradient2" x="0%" y="0" width="100%" height="100%" style="fill: url(#frontGradientFill);" />
<!-- Using that rectangle, we'll create a filter -->
<filter id="backGradient">
<feImage xlink:href="#gradient1" result="grad"/>
<feComposite operator="in" in2="SourceGraphic" in="thickened" result="stroke"/>
<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="200" y="0" z="1000" />
<!-- 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: -->
<feMergeNode in="SourceGraphic" />
<feMergeNode in="COMPOSITE"/>
<filter id="frontGradient">
<feImage xlink:href="#gradient2" result="grad"/>
<feComposite operator="in" in2="SourceGraphic" in="thickened" result="stroke"/>
<feMorphology operator="erode" radius="3"
in="stroke" result="inside" />
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="inside"></feMergeNode>
<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="#5e5775" 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="bloom" >
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feBlend in="SourceGraphic" in2="blur" mode="screen" result="bloomed"/>
<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"/>
content:' ';
background-position-y: 0px;
repeating-linear-gradient(90deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px),repeating-linear-gradient(180deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px );
transform:translateX(-50%) translateY(-50%);
padding:0 0.6em;
filter:url(#backGradient) url(#bevel) url(#frontGradient) url(#outerGlow) url(#bloom);
<link href="" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment