CSS Snippets: Retro Text Effect

One of our favorite ways to play around with CSS is to apply cool effects to text. Text-shadows are a great, versatile tool to employ if you’re looking to apply cool effects to text, as you’ll see in the following snippet. Using CSS text-shadows, it’s easy to create a retro text effect that’s reminiscent of 1970s style and aesthetics. Check out the code below to use it for your own projects.

Screen Shot 2017-02-14 at 12.02.06 PM

Join us in our newest publication:
h1 {
 font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
 font-size: 92px;
 padding: 80px 50px;
 text-align: center;
h1.retrotext {
 color: #d364fb;
 background-color: #d6c140;
 letter-spacing: .05em;
 text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);

As always, the code (colors, font-family, etc) are completely customizable to suit your project.

Share and Enjoy !

0 0