CSS Text Shadow Generator

Type your own heading, drag the offset, blur and opacity sliders, and copy a text-shadow rule with the colour already converted to rgba.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Shadow text

CSS

.headline {
  color: #111827;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 2px 4px 10px rgba(99, 102, 241, 0.55);
}

Values

text-shadow: 2px 4px 10px rgba(99, 102, 241, 0.55)
Shadow colour: rgba(99, 102, 241, 0.55)

Quick answers

What is the syntax for text-shadow in CSS?: text-shadow: offset-x offset-y blur-radius colour. For example text-shadow: 2px 4px 10px rgba(99, 102, 241, 0.55). The two offsets are required. Blur defaults to 0 and colour defaults to the text's own colour if left out.
How do I make text glow with CSS?: Set both offsets to 0 and use a bright colour with some blur: text-shadow: 0px 0px 12px rgba(0, 229, 255, 1). With no offset the shadow spreads evenly around every letter. Light text on a dark background shows it best.
How do I add a drop shadow to text?: Use small positive offsets, a little blur and a dark, partly transparent colour: text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5). That places a soft black shadow 1 pixel right and 1 pixel below the letters.
Does text-shadow have a spread value?: No. Unlike box-shadow, text-shadow accepts only two offsets, a blur and a colour. There is no spread and no inset keyword. To make a shadow look thicker, stack several shadows separated by commas.
How do I make a shadow with no blur?: Set Blur to 0. The result, such as text-shadow: 3px 3px 0px rgba(245, 158, 11, 1), is a crisp duplicate of the text shifted by the offsets. It is the basis of retro and comic-style lettering.
Can I put more than one shadow on text?: Yes. CSS accepts a comma-separated list, drawn with the first shadow on top. This tool builds one shadow at a time, so generate each layer, then join the values with commas in a single text-shadow declaration.

What Text Shadow Generator does

The CSS text-shadow property takes four parts: a horizontal offset, a vertical offset, a blur radius and a colour. This tool lets you set each one with a slider and shows the result on your own words at the size and weight you plan to use. The defaults give text-shadow: 2px 4px 10px rgba(99, 102, 241, 0.55), a soft indigo shadow below and to the right of dark text. Offsets run from -30 to 30 pixels, blur from 0 to 60, and the Shadow opacity slider is folded into the colour as an rgba value, so you never have to convert a hex code by hand. The copied rule also includes the text colour, font-size and font-weight from the preview.

Text shadow examples: slider settings and the CSS they produce

Recipes for the effects people ask for most, with the exact value the tool returns for each.

Effect	Offsets and blur	Shadow colour and opacity	text-shadow value
Subtle depth on dark text	0, 2, blur 4	#000000 at 25%	0px 2px 4px rgba(0, 0, 0, 0.25)
Classic drop shadow on light text	1, 1, blur 2	#000000 at 50%	1px 1px 2px rgba(0, 0, 0, 0.5)
Readable caption over a photo	0, 0, blur 8	#000000 at 80%	0px 0px 8px rgba(0, 0, 0, 0.8)
Cyan glow	0, 0, blur 12	#00e5ff at 100%	0px 0px 12px rgba(0, 229, 255, 1)
Neon pink glow	0, 0, blur 20	#ff00de at 100%	0px 0px 20px rgba(255, 0, 222, 1)
Hard retro offset	3, 3, blur 0	#f59e0b at 100%	3px 3px 0px rgba(245, 158, 11, 1)
Comic block shadow	4, 4, blur 0	#000000 at 100%	4px 4px 0px rgba(0, 0, 0, 1)
Letterpress (dark text, light edge below)	0, 1, blur 0	#ffffff at 80%	0px 1px 0px rgba(255, 255, 255, 0.8)
Engraved (light text, dark edge above)	0, -1, blur 0	#000000 at 40%	0px -1px 0px rgba(0, 0, 0, 0.4)
Floating display heading	0, 8, blur 24	#000000 at 35%	0px 8px 24px rgba(0, 0, 0, 0.35)
Default indigo shadow	2, 4, blur 10	#6366f1 at 55%	2px 4px 10px rgba(99, 102, 241, 0.55)

Offsets are Horizontal offset then Vertical offset, in pixels. Glows and light-edge effects need a background dark enough, or mid-toned enough, for the shadow colour to show.

Text-shadow syntax, value by value

text-shadow: <offset-x> <offset-y> <blur-radius> <colour>;

Offset-x moves the shadow horizontally: positive is right, negative is left. Offset-y moves it vertically: positive is down, negative is up. Blur-radius is optional and cannot be negative; 0 gives a sharp copy of the glyphs and larger values spread and fade it. Colour can be any CSS colour. The tool writes it as rgba(red, green, blue, alpha), where alpha is the Shadow opacity divided by 100, so #6366f1 at 55% becomes rgba(99, 102, 241, 0.55). The order of the three lengths is fixed, but the colour may come first or last. All four values in the tool's output are in pixels.

Stacking shadows: outlines, stronger glows and 3D text

A single shadow covers most needs, and it is what this tool produces. Three popular effects need several shadows in one declaration. Build each layer here, then join them with commas.

Outline: four hard shadows, one towards each corner. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000. It works for thin outlines. Beyond about 2 pixels the corners start to look ragged, and -webkit-text-stroke gives a cleaner line.

Stronger glow: repeat a zero-offset shadow at growing blur sizes, such as 0 0 6px, 0 0 12px and 0 0 24px in the same colour. A single blurred shadow is quite faint at its edges, and layering builds the intensity that neon lettering needs.

3D or long shadow: a staircase of hard shadows, each one pixel further out. text-shadow: 1px 1px 0 #999, 2px 2px 0 #999, 3px 3px 0 #999 makes the text look extruded. More steps make it deeper.

Shadows are painted front to back in the order written, so put the layer you want on top first.

When a text shadow helps reading and when it hurts

A shadow helps most when text sits on a photo or video. A dark halo with no offset, such as 0px 0px 8px rgba(0, 0, 0, 0.8) behind white text, raises contrast right at the edge of each letter, wherever the image happens to be bright.

On a plain background the opposite is true. A blurred shadow adds a band of in-between colour around every letter and softens its edge. Large, heavy headings survive that easily. Body text at 16 pixels does not, so leave paragraphs unshadowed or keep the blur to a pixel or two at low opacity.

Contrast checkers compare the text colour with the background colour and ignore shadows, so a shadow cannot rescue a colour pair that fails, and a pair that passes can still be harder to read once a heavy shadow is added. Use the Font size and Font weight sliders to test the smallest, lightest text the rule will apply to, not just the largest.

Text-shadow vs box-shadow vs drop-shadow()

Feature	text-shadow	box-shadow	filter: drop-shadow()
Follows the shape of	The letters	The element's box, including rounded corners	The visible pixels of the element, including transparent PNG and SVG shapes
Values	x, y, blur, colour	x, y, blur, spread, colour	x, y, blur, colour
Spread	No	Yes	No
Inset	No	Yes	No
Multiple shadows	Comma-separated list	Comma-separated list	Chain several drop-shadow() functions
Use it for	Headings and captions	Cards, buttons, panels	Icons, logos and cut-out images

For a shadow around a button or card instead of its label, use the Box Shadow Generator on this site.

What this tool leaves to you

One shadow layer per run. Multi-layer effects are assembled by hand from several runs.
Pixel units only. For a shadow that scales with the font, replace px with em in the copied rule: at a 48px font size, 2px is roughly 0.04em.
No background colour control for the preview, so judge glows and light shadows against your real page background before relying on them.
The rule is written for a placeholder .headline selector and includes color, font-size and font-weight. Delete the lines you do not need.

How to get your result

1
Type a word or headline into Preview text so you are judging the effect on real content.
2
Set Horizontal offset and Vertical offset. Positive values move the shadow right and down, negative values move it left and up.
3
Raise Blur to soften the shadow, or leave it at 0 for a hard-edged copy of the letters.
4
Pick the Text colour and Shadow colour, then lower Shadow opacity for a subtler effect.
5
Match Font size and Font weight to your heading, then copy or download the CSS.

Questions people ask

Why can't I see my text shadow?

Usual causes: the shadow colour is too close to the background colour, the opacity is very low, or both offsets and the blur are 0 so the shadow sits exactly behind the letters. A semicolon missing from the previous line also makes browsers ignore the declaration.

Can I use a hex colour instead of rgba?

Yes. If the shadow is fully opaque, a hex code such as #000000 works. For transparency you can use an eight-digit hex code, where the last two digits are the alpha, or keep the rgba value the tool writes. Both are supported by current browsers.

Does text-shadow affect layout or spacing?

No. Shadows are painted outside the normal flow and take up no space, so they never push other elements around. A large shadow can be clipped if a parent has overflow: hidden, and can overlap neighbouring text.

Is text-shadow supported in all browsers?

Yes. It has worked without a prefix in every major browser for many years, including mobile Safari and Chrome on Android. No fallback is needed; a browser that somehow ignored it would simply show the text without a shadow.

Does text-shadow slow down a page?

A few shadows on headings cost nothing noticeable. Large blur values on long passages of text, or animating shadows on many elements at once, can make scrolling less smooth on low-powered devices. Keep heavy effects to short display text.

How do I remove a text shadow?

Set text-shadow: none on the element. This is useful for overriding a shadow inherited from a parent, since text-shadow is an inherited property and applies to all text inside the element you set it on.

Can I animate a text shadow?

Yes. text-shadow can be transitioned and animated, for example transition: text-shadow 0.2s on hover. For a smooth result, keep the same number of shadow layers in the start and end states.

What does the Shadow opacity slider change in the code?

It sets the last number in the rgba colour. 100 gives an alpha of 1, which is fully solid. 55 gives 0.55. 0 gives a fully transparent shadow that cannot be seen. The text itself is not affected.