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.
Join us in our newest publication:
Here’s the code for creating the effect yourself:
- body{
- background: #222;
- }
- 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);
- }