How to Add CSS Text Shadow Online — Free (2026)

The brevio CSS Text Shadow Generator lets you build and preview text shadows live, then copy the CSS. Multiple shadows, colour picker, and opacity slider — everything in your browser, nothing sent to a server.

The text-shadow CSS Syntax

text-shadow: <h-offset> <v-offset> <blur-radius> <color>;

Unlike box-shadow, text-shadow does not have an inset keyword or a spread radius. Multiple shadows are separated by commas, just like box-shadow.

How to Add a Text Shadow Step by Step

1. Open the CSS Text Shadow Generator.
2. Set the horizontal offset. A value of 1–3px right is typical for a clean drop shadow. Zero creates a symmetrical glow or emboss effect.
3. Set the vertical offset. Match this to the horizontal offset for a diagonal drop shadow, or keep both at 0 for a blur-only glow.
4. Adjust blur radius. 0px gives a hard, sharp shadow. 3–6px creates a natural look. Very large blur values (10px+) create neon or glow effects.
5. Pick a colour and opacity. Dark shadows use near-black; lighter text often benefits from a very dark semi-transparent colour. For glows, pick a saturated colour that complements the text.
6. Add more shadows. Click + Add Shadow to layer effects. Stacking white and dark shadows creates a letterpress or embossed look.
7. Copy the CSS. Click Copy CSS to get the full text-shadow: declaration.

Classic Text Shadow Patterns

Simple drop shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Hard offset (retro / comic style)

text-shadow: 3px 3px 0 #000;

Neon glow effect

text-shadow: 0 0 8px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;

Embossed effect (light source from top-left)

text-shadow: -1px -1px 0 rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,0.3);

Long flat shadow

text-shadow:
  1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555,
  4px 4px 0 #555, 5px 5px 0 #555, 6px 6px 0 #555;

text-shadow vs filter: drop-shadow()

text-shadow is the standard property for adding shadows to text and is supported in all browsers. filter: drop-shadow() works similarly but applies to the rendered shape including transparent glyphs, making it more useful for SVG text or icon fonts. For regular text, use text-shadow.

Performance Considerations

Text shadows, especially with large blur radii, can be expensive to render. Avoid animating text-shadow directly — instead, fade in an element that already has the shadow applied, or use a pseudo-element with opacity transition. Large blur radii (above 20px) are particularly expensive. Test on low-end devices if performance matters.

Frequently Asked Questions

Can text-shadow be animated?

Yes, text-shadow is an animatable CSS property. However, animating blur radius and colour simultaneously is GPU-intensive. For smoother results, animate opacity on a layer rather than changing text-shadow values directly.

Does text-shadow work on all browsers?

Yes. text-shadow has full support in all modern browsers (Chrome, Firefox, Safari, Edge) since 2011. No vendor prefix is needed.

How do I remove a text shadow?

Set text-shadow: none. This explicitly overrides any inherited or previous shadow value.

Can I use text-shadow on SVG text?

Yes, in modern browsers. However, SVG text rendering with text-shadow can be inconsistent across browsers. For SVG, the filter element with feDropShadow or feGaussianBlur is more reliable and widely supported.