The CSS text-shadow property takes an x offset, a y offset, an optional blur radius and a colour, for example text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Separate several shadows with commas to stack them, which is how neon glows and 3D lettering are made. Build one below and copy the CSS or Tailwind class.
| Value | Example | Effect |
|---|---|---|
| x offset | 2px | Moves the shadow right (negative: left) |
| y offset | 2px | Moves the shadow down (negative: up) |
| blur radius | 6px | Softens the edge; 0 gives a hard copy |
| colour | rgb(0 0 0 / 0.25) | Any CSS colour; defaults to the text colour |
Updated
Stack as many layers as you like, change the text, font size and colours, and watch the preview update. The output is plain CSS that works in every current browser, plus a Tailwind class for projects that use it.
| Preset | CSS |
|---|---|
| Soft lift | text-shadow: 0 2px 6px rgb(0 0 0 / 0.25); |
| Neon | text-shadow: 0 0 4px #ffffff, 0 0 12px #4f98fb, 0 0 24px #4f98fb, 0 0 48px rgb(79 152 251 / 0.7); |
| 3D block | text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #92400e, 4px 4px 0 #78350f, 6px 6px 10px rgb(0 0 0 / 0.4); |
| Long shadow | text-shadow: 1px 1px 0 #115e59, 2px 2px 0 #115e59, 3px 3px 0 #115e59, 4px 4px 0 #115e59, 5px 5px 0 #115e59, 6px 6px 0 #115e59, 7px 7px 0 #115e59, 8px 8px 0 #115e59, 9px 9px 0 #115e59, 10px 10px 0 #115e59, 11px 11px 0 #115e59, 12px 12px 0 #115e59, 13px 13px 0 #115e59, 14px 14px 0 #115e59; |
| Letterpress | text-shadow: 0 1px 0 rgb(255 255 255 / 0.8); |
| Retro offset | text-shadow: 3px 3px 0 #ef4444, 6px 6px 0 #f59e0b; |
| Outline | text-shadow: -1px -1px 0 #0f172a, 1px -1px 0 #0f172a, -1px 1px 0 #0f172a, 1px 1px 0 #0f172a; |
| Text on a photo | text-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 18px rgb(0 0 0 / 0.45); |
Each comma-separated shadow is painted behind the text, and the first one in the list ends up on top of the others. That order matters for 3D effects: list the closest, lightest layer first and the furthest, darkest last.
Long shadows are just many identical layers stepped one pixel at a time. They look striking in a large heading, but every layer is another paint, so keep the step count modest.
Shadows can blur small text and make it harder to read for people with low vision. Reserve decorative effects for large headings, and keep body text crisp.
If you animate a glow, wrap the animation in a prefers-reduced-motion check so people who have asked for less motion get a still version.
Use light text with several shadows of the same bright colour at zero offset and growing blur: a tight white glow, then 12px, 24px and 48px glows in the accent colour. Put it on a dark background. The Neon preset is a starting point.
No. text-shadow has no spread value and no inset keyword. To fake a thicker outline, stack several hard shadows offset by one pixel in each direction, as the Outline preset does, or use -webkit-text-stroke.
Tailwind 4.1 and later include text-shadow utilities such as text-shadow-sm and text-shadow-lg. For a custom shadow in any version, use an arbitrary property like [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], where underscores stand for spaces. The generator writes that class for you.
Browsers rasterise blur slightly differently, so large blurs can look softer or stronger from one engine to another. Hard shadows with zero blur look the same everywhere.
Related: CSS box shadow generator, Text gradient generator, CSS text styling guide, Hex opacity calculator, Colour contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.