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.

Worked example

x 1px; y 3px; blur 9px; #202636 at 0.32 opacity

text-shadow: 1px 3px 9px rgba(32, 38, 54, 0.32);

Edge cases to check

• Multiple shadows require comma-separated values and are outside this single-shadow control.
• Large blur or low-contrast combinations can reduce readability.
• Text rendering varies by font, platform and antialiasing.

Known limitations

The preview shows one CSS text shadow; it does not assess accessibility contrast or predict every font/rendering environment.