How is text-shadow different from box-shadow?

text-shadow applies a shadow to the glyphs of text and has no spread value, while box-shadow applies to an element's box and supports spread and inset. The syntax is offset-x, offset-y, blur-radius and colour.

How do I create a glow effect?

Set offset X and offset Y to 0, raise the blur, and choose a bright colour. A zero-offset blurred shadow reads as a glow around the text.

Is anything uploaded?

No — the text-shadow value is generated entirely in your browser and nothing is sent anywhere.

What does the opacity slider do to my colour?

The tool converts your hex colour into an rgba() value and uses the opacity slider as the alpha channel, so a black shadow at 50% opacity becomes rgba(0, 0, 0, 0.5). Lower opacity gives a softer, more subtle shadow.

Can I stack more than one text-shadow?

Yes. text-shadow accepts a comma-separated list of shadows. Generate each layer here and join them with commas to build neon outlines, 3D extrusions or multi-colour glows.

How do I make text more readable over a busy background?

A small, low-blur dark shadow with no offset (for example 0px 0px 4px rgba(0,0,0,0.6)) adds a subtle halo that lifts light text off a photo without looking like a deliberate effect.

Why is my blurry text-shadow hard to see?

A high blur spreads the same colour over a larger area, which lowers its apparent strength. Raise the opacity, reduce the blur, or stack two identical shadows to reinforce the effect.

CSS Text Shadow Generator

CSS text-shadow generator

This tool styles a CSS text-shadow visually and gives you the exact value to paste into your stylesheet. It is for developers and designers adding depth, glow or readability to headings, hero text and labels. The preview applies the shadow to sample text so you can judge it before copying.

How it works

The text-shadow property follows the order offset-x offset-y blur-radius colour. Note there is no spread value as there is on box-shadow. The generator reads your sliders — offset X and Y move the shadow, blur softens it — and combines your hex colour with the opacity slider into an rgba() value so the shadow can be semi-transparent. The result is applied live to a sample heading.

Example

With offset X = 2px, offset Y = 2px, blur = 4px, colour #000000 and opacity 50%, the tool outputs:

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

That is a soft drop shadow below and to the right of the text. Set both offsets to 0 and raise the blur for a glow instead, e.g. 0px 0px 12px rgba(0, 200, 255, 0.8).

Effect	Offset X/Y	Blur
Subtle drop	1–2px	2–4px
Strong drop	3–4px	6px
Glow / neon	0px	10–20px
Readability halo	0px	4px

The text-shadow value is generated locally in your browser — nothing is uploaded.