CSS3 Embossed Text Effect

Published January 21, 2016 by saurav.roy.

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.


text-align: center;
font-size: 60px;
color: #333;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);

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