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.
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.
<div class="centered"><div class="streamster">CSS Text Effect</div><div class="kabel-black big">80s</div><div class="kabel-black">FONTS</div></div> | |
<svg> | |
<defs> | |
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="insideGradientFill"> | |
<stop offset="0%" style="stop-color: #2989cc; stop-opacity: 100%;" /> | |
<stop offset="50%" style="stop-color: #d3e5ec; stop-opacity: 100%;" /> | |
<stop offset="51%" style="stop-color: #592451; stop-opacity: 100%;" /> | |
<stop offset="55%" style="stop-color: #b3628d; stop-opacity: 0%;" /> | |
<stop offset="59%" style="stop-color: #592451; stop-opacity: 100%;" /> | |
<stop offset="65%" style="stop-color: #b3628d; stop-opacity: 100%;" /> | |
<stop offset="75%" style="stop-color: #ac86a6; stop-opacity: 100%;" /> | |
<stop offset="100%" style="stop-color: #b3628d; stop-opacity: 100%;" /> | |
</linearGradient> | |
<linearGradient id="repeatingGradient" xlink:href="#insideGradientFill" spreadMethod="repeat" /> | |
<rect id="insideGradient" x="0%" y="0" width="100%" height="100%" style="fill: url(#repeatingGradient);" /> | |
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="borderGradientFill"> | |
<stop offset="0%" style="stop-color: #3b94d1; stop-opacity: 100%;" /> | |
<stop offset="22%" style="stop-color: #cfe5ec; stop-opacity: 100%;" /> | |
<stop offset="40%" style="stop-color: #3b94d1; stop-opacity: 100%;" /> | |
<stop offset="60%" style="stop-color: #cfe5ec; stop-opacity: 100%;" /> | |
<stop offset="80%" style="stop-color: #3b94d1; stop-opacity: 100%;" /> | |
<stop offset="100%" style="stop-color: #cfe5ec; stop-opacity: 100%;" /> | |
</linearGradient> | |
<linearGradient id="repeatingBorderGradient" xlink:href="#borderGradientFill" spreadMethod="repeat" /> | |
<rect id="borderGradient" x="0%" y="0" width="100%" height="100%" style="fill: url(#repeatingBorderGradient);" /> | |
<circle id="diffuseLightSpot" cx="50%" cy="50%" r="25%" fill="#ff11ff"/> | |
<filter id="chrome" > | |
<feImage result="rect" xlink:href="#insideGradient"></feImage> | |
<feImage result="rect1" xlink:href="#borderGradient"></feImage> | |
<feComposite in2="SourceGraphic" in="rect" operator="in" result="insideGradient"></feComposite> | |
<feMorphology operator="dilate" radius="5" | |
in="SourceGraphic" result="edge"/> | |
<feGaussianBlur stdDeviation="10" in="edge" result="BLUR"/> | |
<feSpecularLighting surfaceScale="2" specularConstant="1" specularExponent="10" lighting-color="white" in="BLUR" result="SPECULAR"> | |
<fePointLight x="400" y="0" z="500" /> | |
</feSpecularLighting> | |
<!-- We cut off the parts that overlap the source graphic… --> | |
<feComposite operator="in" in="SPECULAR" in2="edge" result="beveledEdge"/> | |
<feComposite in2="beveledEdge" in="rect1" operator="in" result="borderGradient"></feComposite> | |
<feMerge> | |
<feMergeNode in="borderGradient"></feMergeNode> | |
<feMergeNode in="insideGradient"></feMergeNode> | |
</feMerge> | |
</filter> | |
<filter id="reflection"> | |
<feImage x="100" y ="-60" width="100%" height="100%" xlink:href="#diffuseLightSpot" result="diff"></feImage> | |
<feGaussianBlur in="diff" stdDeviation="15" result="diff1"></feGaussianBlur> | |
<feComposite in="diff1" in2="SourceGraphic" operator="in" result="diff2"></feComposite> | |
<feMerge> | |
<feMergeNode in="SourceGraphic"></feMergeNode> | |
<feMergeNode in="diff2"></feMergeNode> | |
</feMerge> | |
</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="300" y="0" z="100" /> | |
</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="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="#ff11ff" 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:#1c0d2e; | |
} | |
:root:after{ | |
content:' '; | |
position:absolute; | |
width:100vw; | |
height:100vh; | |
top:0; | |
left:0; | |
filter:url(#noise); | |
} | |
.centered{ | |
position:absolute; | |
left:50vw; | |
top:50vh; | |
transform:translateX(-50%) translateY(-50%); | |
text-align:center; | |
} | |
.streamster{ | |
color:magenta; | |
font-family:'Streamster'; | |
font-size:30pt; | |
filter:url(#bevel) url(#outerGlow); | |
transform:translateY(10pt) rotate(-10deg); | |
z-index:999; | |
position:relative; | |
} | |
.kabel-black{ | |
position:relateive; | |
font-family:'Kabel Black'; | |
font-size:75pt; | |
min-width:300px; | |
line-height:0.9em; | |
letter-spacing:10px; | |
padding:0 1em; | |
color:white; | |
filter:url(#chrome); | |
} | |
.kabel-black.big{ | |
font-size:150pt; | |
padding:0 1vh; | |
filter:url(#chrome) url(#reflection) brightness(250%); | |
} |
<link href="https://www.coding-dude.com/fonts/kabel-black-stylesheet.css" rel="stylesheet" /> | |
<link href="https://www.coding-dude.com/fonts/streamster-stylesheet.css" rel="stylesheet" /> |