Home » Internet » Web Designing » How to create text shadows effect with CSS

How to create text shadows effect with CSS



Creating text shadows with CSS is a great way of creating cool text effects without having to use images. With abundant bandwidth and low hosting costs you may wonder why create text shadow effects with CSS if you can easily do that with graphic files? Well, you may not have a decent image editing or graphics software, and you may need to use the effect with a large chunk of text — using large chunks of text as image is bad for SEO.

If you’re wondering what is achieved by creating text shadows with CSS, just check out these CSS text shadows examples.

Just as a note, text shadows look better on semi-dark background if you are going to have a black shadow, unless the font you are using is very crisp and fine. So here we go:

And you use it like this:

This is a CSS text
shadow example!

CSS Text shadow effect

CSS Text shadow effect

This is quite simple. You can also create a beveled text effect with minor changes.

We simply darken the font color and lighten the text shadow color. Here’s the result:

CSS Text shadow effect - beveled

CSS Text shadow effect - beveled