CSS Text Shadow Generator
To use this text shadow generator tool adjust the values and copy the generated code on the right.
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