Text Shadow Generator

Build CSS text-shadow with sliders and see a live text preview

What is it and how does it work?

CSS text-shadow adds one or more drop shadows to text, defined by horizontal offset, vertical offset, blur radius, and colour. A single well-tuned shadow makes headlines pop on a background image; layering multiple shadows creates neon glow, letterpress, long-shadow, or 3D extrusion effects — purely in CSS, with no images or SVG filters required. The property has been supported by every major browser since IE10.

This generator provides a live preview with controls for each shadow layer: drag the offset handles or type values directly, adjust blur, pick a colour with an alpha channel, and toggle layers on/off. The output is a ready-to-paste CSS text-shadow declaration that can include unlimited comma-separated shadow layers. Copy the single line of CSS and drop it into your stylesheet.

Common use cases

• Legibility over images: add a soft dark shadow (0px 1px 3px rgba(0,0,0,0.6)) to white hero text placed over a variable photo background.
• Neon glow: layer three shadows in the same hue with increasing blur radii (0 0 5px, 0 0 15px, 0 0 30px) to simulate a glowing sign.
• Letterpress / embossed: combine a light shadow below-right and a dark shadow above-left to make text appear pressed into the surface.

Frequently asked questions

What is the order of values in text-shadow?

text-shadow: offset-x offset-y blur-radius color. The blur-radius is optional (defaults to 0 = hard edge). Colour can come before or after the offsets — both are valid CSS, but after is the common convention.

Can I use text-shadow without a blur for hard shadows?

Yes. Setting blur-radius to 0 or omitting it gives a crisp hard-edged shadow. This is the basis of long-shadow and retro 8-bit effects, where you stack many zero-blur shadows in the same direction.

Does text-shadow work on ::before and ::after pseudo-elements?

Yes — text-shadow applies to the text content of pseudo-elements just as it does to real text. This is commonly used to create decorative effects without extra HTML.

Is text-shadow the same as box-shadow?

No. text-shadow applies only to the text glyphs and their decoration (underline, etc.); box-shadow applies to the entire element box, including padding and border. text-shadow does not support the inset keyword.

CSS

Box Shadow Generator · Border Radius Generator · Flexbox Generator · CSS Grid Generator · CSS Animation Generator · CSS Filter Generator