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:
- h1{
- 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!