ToolToUse

Color & Design

Text Shadow Generator

Add depth or a glow to type with a live text-shadow preview, then copy the CSS for your stylesheet.

Color & design

Text shadow builder

Local only
ToolToUse
text-shadow: 2px 3px 6px rgba(15, 23, 42, 0.45);
Nothing leaves your device

Your preview text and colours stay in the browser.

text-shadow in three numbers

Horizontal offset, vertical offset and blur radius, followed by a colour. Unlike box-shadow there is no spread value, and multiple shadows separated by commas let you build outlines and layered glows.

Use it sparingly

  • Heavy shadows hurt legibility at small sizes — keep them for headings.
  • A low-opacity shadow is enough to lift white text off a photo.
  • For an outline, combine four hard shadows offset in each direction.

Good to know

Frequently asked questions

Can I add more than one shadow?

Yes. Generate each one here and join the values with commas in a single text-shadow declaration.

How do I make text readable over a photo?

A 0 0 8px shadow in black at around 60% opacity adds separation without looking like an effect.

Does text-shadow work on every browser?

Yes, it has been supported everywhere for many years and degrades harmlessly if unsupported.

Why does my glow look weak?

Increase the blur and opacity, and set both offsets to 0 so the glow spreads evenly around the letters.

Keep exploring

View all

Color & Design

Color Converter

Convert colors between HEX, RGB and HSL with a live preview.

Open tool
Popular

Color & Design

Color Picker

Pick any color and read its HEX, RGB and HSL values instantly.

Open tool

Color & Design

HEX to RGB Converter

Turn a HEX color code into RGB and CSS-ready values.

Open tool