CSS3’s Embossed Text Effect

There are so many cool text effects that can be achieved using CSS3’s versatile text-shadow property. One easy text effect you can employ using this method is the embossed text effect. Basically, by setting the text-shadow values to negative numbers, we can easily create the illusion embossed, almost 3-dimensional text.

Screen Shot 2016-08-03 at 10.28.21 AM

Here’s the code for creating the effect yourself:

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More
  1. body{
  2. background: #222;
  3. }
  5. h1{
  6. text-align: center;
  7. font-size: 60px;
  8. color: #333;
  9. text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
  10. }


Share and Enjoy !

0 0