CSS Text Shadow Generator

How it works

Enter the shadow colour as one line in the left box — HEX works, and so do rgb() and hsl(). Then play with the four sliders: the two offsets set the direction the shadow falls, blur sets how soft its edge is, and opacity sets how much of the background still shows through. For a heading with gentle depth, start at a 2 pixel offset, 6 pixels of blur and 40% opacity — the code reads 2px 2px 6px rgba(0, 0, 0, 0.4). For a neon glow, set both offsets to 0, push the blur to 20-30 pixels and pick a bright colour: the shadow spreads evenly around every letter and reads as light. For a letterpress look, drop the blur to 0 and the offset to 1 pixel. The sample text redraws with every change; grab the finished rule from the right panel, and if you need a picture of the effect, the Download button saves a 1200×630 pixel PNG.

This tool is also known as css text shadow generator, text shadow css, text shadow examples, neon text css, css font shadow, letterpress text css.

What is text-shadow?

The text-shadow property paints a shadow behind the glyphs of a run of text. Its values are, in order, a horizontal offset, a vertical offset, an optional blur radius and a colour; comma-separating several groups stacks shadow layers on the same text. The shadow traces the visible outline of each character — it applies to the letterforms, not to the element's rectangular box. Neither the space the text occupies nor the line layout changes, so a heading gains depth without a single shift in the page.

What is Blur radius?

The blur radius is the third number: it says over how many pixels the edge of the shadow fades out. At 0 the shadow is a sharp-edged copy of the text; as the value grows the shadow spreads, widens and lightens. Growing the blur while both offsets stay at 0 spreads the shadow evenly in every direction — that is the basis of neon and glow effects. The radius cannot be negative, which is why the slider in this tool starts at 0.

What is the difference between text-shadow and box-shadow?

Both use the same value logic but shade different things: text-shadow follows the visible outlines of the letters, while box-shadow is drawn against the element's rectangular box. Give a heading a box-shadow and the shadow falls under the invisible box around the text, not under the letters. The syntax differs too: text-shadow takes no spread value and knows no inset, but stacking layers is far more common with text-shadow, because effects like neon and letterpress are built from layers. The practical rule: text-shadow for letters, box-shadow for cards and boxes.

The contrast trap: a shadow cannot rescue unreadable text

The most common misuse of text-shadow is trying to fix poor contrast with it. A dark shadow genuinely helps white text sit on a photo — but accessibility checks (the WCAG contrast ratio) are measured between the text colour and the background, and they ignore the shadow entirely. A shadow cannot rescue a fundamentally wrong pairing like light text on a light background: choose readable colours first, then add the shadow as depth on top.

The second trap is the hard, fully opaque shadow: blur at 0, opacity at 100% and a large offset makes the shadow look like a second printed copy of the text, and at small font sizes that doubled edge seriously hurts reading. The safest rule is to keep shadows off body text and save them for headings and other large elements.

Which text shadow for which job?

The same four values in different balances produce very different effects; the code always follows the same pattern.

• White heading over a photo → 0 2 8 at 50-60% opacity: the text separates from the image
• Subtle depth on a page title → 2 2 6 at 30-40% opacity: visible but quiet
• Neon / glow → 0 0 24 with a bright colour at 80-100%: with no offset the shadow spreads all around
• Letterpress → 0 1 0 fully opaque: one light pixel on a dark ground, one dark pixel on a light ground

Frequently asked questions

What does the order of the text-shadow values mean?

The reading never changes: horizontal offset first, then the vertical one, then blur, then the colour. Unlike box-shadow there is no spread value and no inset keyword — after the three numbers the colour follows directly. The generated rule spells out all four parts, so whichever slider you move, you can spot its number in the code.

Can I stack several shadow layers on the same text?

Yes — layers are written one after another, separated by commas, and that is how a full neon glow is usually built: three layers of the same colour at 10, 20 and 40 pixels of blur sit on top of each other. This page keeps its output to one layer so the rule stays simple; to build layers, generate a few results with different settings and comma-join the parts yourself.

What is in the downloaded PNG?

The sample text with the shadow applied, at 1200×630 pixels — handy for dropping the effect into a design review or a message as an image. The code itself is not in the file; take it from the right panel with the copy button, where it sits ready after every change.

Does the shadow look the same in every browser?

The value syntax is identical in every current browser and text-shadow has been supported for many years. The softness of the blur can still differ subtly between rendering engines, so for a critical design it is worth checking the result once in the target browser.