← All Tools
CSS Text Shadow Builder Formatter🔒 100% local
Generate text shadow effects. Privacy-first, no server uploads, no tracking.
Feed it shadow measurements in offsetX offsetY blur color order and it reports how the shadow reads, prints the declaration in multi-line and single-line form, and proposes three variations including the negative-offset inset look. Seven named presets - neon, retro, outline, emboss, subtle, fire, 3d - return a stack of shadow layers instead of a single one.
How to use it
- Type the numbers, with or without units: 2px 2px 4px #000 or 0 2px 6px rgba(0,0,0,0.4).
- Or type a preset name on its own, such as neon, to get its layer stack expanded.
- Press Process, then copy the Single-line block - that is the value you paste into a stylesheet.
Worked example
2px 2px 4px #000becomesRead as: crisp drop shadow
CSS:
.text {
text-shadow:
2px 2px 4px #000
;
}
Single-line:
text-shadow: 2px 2px 4px #000;
Variations:
text-shadow: 2px 2px 4px #000, 0 0 8px #000; /* add glow */
text-shadow: 0 0 4px #000; /* pure glow, no offset */
text-shadow: -2px -2px 4px #000; /* inset-looking (negative offsets) */
Accessibility note: keep blur small relative to font size — heavy glow hurts contrast (WCAG).Blur 4 is labelled 'crisp drop shadow'; the glow variation is only offered because the blur is non-zero.
2px 2px 4%becomesRead as: hard drop shadow (retro/duotone look)
CSS:
.text {
text-shadow:
2px 2px 0px 4%
;
}
Single-line:
text-shadow: 2px 2px 0px 4%;
Variations:
text-shadow: 0 0 0px 4%; /* pure glow, no offset */
text-shadow: -2px -2px 0px 4%; /* inset-looking (negative offsets) */
Accessibility note: hard shadows can reduce legibility on non-uniform backgrounds.A percentage cannot match the blur or color slots, so it is read as the color and the blur falls back to 0px - the resulting declaration is not valid CSS.
When to use it
- You want a small offset shadow on a headline and cannot remember the order of the three lengths.
- You need a hard retro layer stack and would rather not hand-write six rgba values for the 3d preset.
- You are adding a glow to a button label and want a starting point that keeps the blur modest.
What it does not do
- Units must be px, em or rem when present; a percentage or any other trailing token is absorbed into the color field instead of being rejected.
- Only three numbers plus a color are read. A fourth number is swallowed into the color string, so '2px 2px 4px #000 5px' produces the nonsense color '#000 5px'.
- It writes values only - there is no preview on your typeface, so weight, letter spacing and background contrast remain your judgement.
- The style label is coarse: exactly 0 blur is called hard, and anything above 12 is called very soft, regardless of the offsets involved.