Presets
Text shadow
Font size64px
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
Long shadow (adds one layer per pixel)
Layer 1
X offset2px
Y offset2px
Blur4px
Opacity40%
How to use
01
Pick a preset or add layers
Click a preset such as Outline, Neon or Retro, or edit the default layer. Add up to twelve layers and switch on Long shadow for a stepped shadow along an angle.
02
Tune the text and shadow
Set X offset, Y offset, Blur, Opacity and color for each layer. Type your preview text and set the text color, background, font size, weight and font to match your design.
03
Copy the code
Pick CSS, With color, Tailwind or SCSS and press Copy or Download. Copy share link keeps the layers, text and colors in a URL.
Why CSS Text Shadow Generator
- Up to twelve text shadow layers with offset, blur, color and opacity.
- A long shadow builder with any angle, length and an optional fade.
- Twelve presets, from a subtle lift to neon, outline, emboss and fire.
- Preview on your own text, then copy CSS, Tailwind or SCSS.
text-shadow values explained
A single shadow has up to four parts. Offsets are required, blur and color are optional. When the color is left out, the browser uses the text color.
| Part | Example | What it does |
|---|---|---|
| X offset | 2px | Moves the shadow right (positive) or left (negative) |
| Y offset | 2px | Moves the shadow down (positive) or up (negative) |
| Blur | 4px | Softens the edge; 0 gives a hard copy of the letters |
| Color | rgba(0, 0, 0, 0.4) | Shadow color; the alpha sets how strong it is |
Copy-ready text shadow recipes
These are values from the presets, written the way the tool outputs them. Paste them after text-shadow: in your CSS and adjust the colors to your palette.
| Look | Value |
|---|---|
| Subtle | 0 1px 2px rgba(0, 0, 0, 0.25) |
| Hard offset | 3px 3px 0 #111827 |
| Letterpress (on light gray) | 0 1px 0 rgba(255, 255, 255, 0.7) |
| Glow | 0 0 12px rgba(56, 189, 248, 0.9) |
| Retro | 3px 3px 0 #f472b6, 6px 6px 0 #38bdf8 |
Common questions
What is the syntax of the CSS text-shadow property?
Each shadow is X offset, Y offset, an optional blur and a color, for example text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Several shadows are separated by commas, and the first one is drawn on top. Unlike box-shadow, text-shadow has no spread value and no inset keyword.
How is text-shadow different from box-shadow?
text-shadow follows the shape of each letter, while box-shadow follows the element's rectangle. text-shadow also lacks spread and inset. Use this tool for headings and logos, and the box shadow generator for cards and buttons.
How do I make an outline around text with text-shadow?
Add four shadows with no blur, offset by 1px in each diagonal direction, in the outline color. The Outline preset does exactly that. For thicker outlines, -webkit-text-stroke gives cleaner results, but text-shadow works everywhere.
How do I make a neon text effect in CSS?
Use white or a pale text color and stack several shadows with zero offset and growing blur, from about 4px to 40px, in one hue family. Put the text on a dark background. The Neon preset gives a ready starting point you can recolor.
How does the long shadow option work?
It adds one shadow per pixel of length along the angle you choose, each with no blur, so the steps join into a solid band. With Fade on, the opacity drops toward the end. 45 degrees points down and to the right. Long values create many layers, so keep them for headings, not body text.
How do I make 3D text with text-shadow?
Stack several hard shadows that step 1px down and to the right in a darker shade of the text color, then add one soft shadow underneath. The 3D preset uses a six step long shadow in gray plus a blurred drop shadow.
Does text-shadow affect readability or accessibility?
Heavy blurs and low contrast shadows can make small text harder to read. Keep strong effects for large headings, check the text color against the background, and avoid glows on body copy. A subtle shadow can help white text stay readable over a photo.
Is there a Tailwind class for text-shadow?
Tailwind 3 has no built-in text-shadow utility, so the Tailwind tab writes an arbitrary property class such as [text-shadow:2px_2px_4px_rgba(0,0,0,0.4)]. Tailwind 4 adds text-shadow utilities, and the arbitrary form still works there.
Can I animate text-shadow?
Yes. text-shadow can be transitioned, as long as both states have the same number of shadows. A glow that grows on hover is a common use. Animating many layers or large blurs on long text can be heavy, so test on slower devices.
Does the text shadow generator upload my text anywhere?
No. The preview and the CSS are built in your browser. A share link stores the settings after the # sign in the URL, which is not sent to the server when the page loads.