80s Fonts Text Effect 6: CSS Rocket Rinder Font Chrome Text Effect

80s-fonts-text-effect-6-css-rocket-rinder-font-chrome-text-effect.markdown

80s Fonts Text Effect 6: CSS Rocket Rinder 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="rocketrinder">Rocket<br/> Rinder</div></div>


<svg>
  <defs>
    
        <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>

    <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%;" />
        </linearGradient>
        <!-- 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>
        <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" />
</feSpecularLighting>
          <!-- 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: -->

<feMerge>
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="COMPOSITE"/>
</feMerge>
        </filter>
    
    <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" />
      <feMerge>
        <feMergeNode in="SourceGraphic"></feMergeNode>
        <feMergeNode in="inside"></feMergeNode>
      </feMerge>
    </filter>

    <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 -->
		<feMerge>
			<feMergeNode in="softGlow_colored"/>
			<feMergeNode in="SourceGraphic"/>
		</feMerge>

	</filter>
    
    
    <filter id="bloom" >
      <feGaussianBlur stdDeviation="1.5" result="blur"/>
      <feBlend in="SourceGraphic" in2="blur" mode="screen" result="bloomed"/>
</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:#0e0a21;
}
:root::before{
  content:' ';
  position:absolute;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  opacity:0.3;
  background-position-y: 0px;
  background-image:
        repeating-linear-gradient(90deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px),repeating-linear-gradient(180deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px );

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

.rocketrinder{
  color:#a299b6;
  font-family:'RocketRinder';
  font-size:20vh;
  line-height:0.8em;
  padding:0 0.6em;
  filter:url(#backGradient) url(#bevel) url(#frontGradient) url(#outerGlow) url(#bloom);
}

styles

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