Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
80s Fonts Text Effect 1: 80s Chrome Text
<div class="chrome80s centered" data-text="COMMANDO">COMMANDO</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="bevel">
<!-- filter stuff happening here -->
<feMorphology operator="dilate" radius="3" in="SourceGraphic" result="bevel" />
</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:radial-gradient(#0d2f52 0%,black 40%) -20vw 10vh no-repeat black;
filter:url('#noise') contrast(110%);
margin:0;
padding:0;
width:100vw;
height:100vh;
position:absolute;
}
.centered{
text-align:center;
margin-top:calc(50vh - 0.5em);
}
.chrome80s{
font-family: 'Commando', sans-serif;
font-size:8rem;
font-weight:100;
position:relative;
white-space:nowrap;
background-image:linear-gradient(#010012 20%,#4694c9 40%,#fdf9f7 50%,#010923 50%,#d7674f 60%, #ffc2a4 70%, #edb18c 90%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke-width: 0.1rem;
-webkit-text-stroke-color: rgba(0,0,0,0.2);
}
.chrome80s:before{
content:attr(data-text);
filter:url(#bevel);
background:linear-gradient(#ffffff 20%,#58bee4 30%, #204a68 50%,#62a7d1 70%, #ffffff 80%) 0% 0% repeat;
-webkit-background-clip:text;
position:absolute;
z-index:-1;
}
.chrome80s:after{
content:attr(data-text);
position:absolute;
text-shadow:0 0 25px rgba(255,255,255,0.5);
transform:translate(-100%);
z-index:-2;
}
<link href="https://www.coding-dude.com/fonts/commando-stylesheet.css" rel="stylesheet" />
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.