CSS Text Shadow Generator

To use this text shadow generator tool adjust the values and copy the generated code on the right.

Preview options

CSS Text Shadow Preview

What is This tool?

It is a simple free way to create an infinite number of text-shadow effects in CSS.

The CSS text-shadow property is easily one of the most popular ways of enhancing the look of a website if used in an appropriate way. The function became popular after its re-release in the huge update to CSS - version 3.

text-shadow: -1px -1px 1px #333

The text-shadow syntax looks like the above. There are four properties, starting from left to right:

  • X-axis for shadow distance - horizontal position
  • Y-axis for shadow distance - vertical position
  • Blur - the blur radius of the shadow
  • Colour - this can be an rbg, rbga or hex value

As you can see the syntax is rather simple once you get used to it. Regardless, I decided to make this text-shadow generator as a quick way to generate the code from a visual perspective for those of us on a mission to meet a deadline.

Text-shadow browser support

Chrome
Safari
Firefox
Opera
IE
Android
iOS
2+
1.1+
3.5+
9.5+
10+
any
any