CSS3 Embossed Text Effect

Published January 21, 2016 by CSS Newbies.

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!

  1. Pingback: Web Design Retrospective: Adrian Dayton – Lauren Orsini

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>