CSS3 Embossed Text Effect

CSS3’s text-shadow property can be used to achieve so many cool text effects, including an embossed effect. This effect is created by giving the text-shadow property  values of -1 for the horizontal and vertical shadow, and leaving the blur-radius at its default of 0. Then horizontal and vertical shadow values of positive 1 are layered on top of the negative values. Find the code below.


Join us in our newest publication:
  1. h1{
  2. text-align: center;
  3. font-size: 60px;
  4. color: #333;
  5. text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
  6. }

Don’t forget that there should only be a few shades of difference between the background color and the text color to achieve a true embossed look!

Share and Enjoy !

0 0