Text Shadow Generator

About this tool

A text shadow can improve separation from a busy background, reinforce a display heading or create a restrained embossed effect. It can also make type fuzzy very quickly. The Text Shadow Generator provides direct control over horizontal offset, vertical offset, blur, color and opacity while showing the effect on editable preview text.

For readable interface text, start with a small offset, modest blur and low opacity. Large, dark shadows are better reserved for oversized display type, and they should never be used as a substitute for adequate foreground/background contrast. The output is a standard text-shadow declaration. For shadows around boxes rather than glyphs, use the Box Shadow Generator.

How to use it

1. Enter the same text, size and weight you expect to use in the real design.
2. Set horizontal and vertical offsets to position the shadow relative to each glyph.
3. Increase blur gradually until hard edges disappear without making the text look smeared.
4. Choose a shadow color and lower opacity for a more natural result.
5. Copy the CSS and test readability against every background used by the component.

Useful ways to apply it

• Separating a large heading from a photograph or gradient background.
• Adding a subtle depth cue to logos, badges and promotional display text.
• Testing light-on-dark and dark-on-light shadow combinations.
• Reproducing a design reference with exact offset and blur values.
• Creating restrained hover states without changing text dimensions.