Skip to content
PithLab

↑↓ to move · Enter to open · Esc to close

CSS Text Shadow Generator

Layered CSS text shadows with neon, 3D, outline and long shadow presets.

Shadow text

Presets:
Layer 1
Use via API

Build a CSS text-shadow from one layer's settings, a JSON list of layers, or a named preset (neon, 3D, outline, long shadow). Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/css-text-shadow-generator

curl https://pithlab.com/api/v1/tools/css-text-shadow-generator \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"x":2,"y":2,"blur":4,"color":"#000000","opacity":50}'

Fields and responseOpenAPI documentGet an API key

About the Text Shadow Generator

Design CSS text shadows with stacked layers, opacity and live preview text. Start from neon, 3D, outline or long shadow presets and copy the text-shadow CSS.

How to use the Text Shadow Generator

  1. Pick a preset (soft, neon, 3D, outline or long shadow) or start from the default shadow.
  2. Edit each layer's horizontal and vertical offset, blur, colour and opacity. Add layers to build glows and depth.
  3. Type your own preview text and set the font size and colours to see it in context.
  4. Copy the text-shadow CSS into your stylesheet.

Examples

Subtle drop shadow

Input

2, 2, 4, #000000 at 50%

Output

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Hard offset, no blur

Input

3, 3, 0, #ef4444 at 100%

Output

text-shadow: 3px 3px 0 #ef4444;
Soft glow, two layers

Input

0, 0, 8, #38bdf8 at 100% + 0, 0, 24, #38bdf8 at 60%

Output

text-shadow: 0 0 8px #38bdf8, 0 0 24px rgba(56, 189, 248, 0.6);

Frequently asked questions

What do the text-shadow values mean?

Each shadow is horizontal offset, vertical offset, blur radius and colour. Positive offsets move the shadow right and down. Unlike box-shadow, text-shadow has no spread value and no inset keyword.

Which layer is drawn on top?

The first shadow in the list is painted on top and later ones go underneath. For a neon glow, put the small tight blur first and the wide soft blurs after it.

How do I outline text with text-shadow?

Stack four shadows offset by 1px up-left, up-right, down-left and down-right with no blur, as in the Outline preset. For thicker or smoother outlines, -webkit-text-stroke or paint-order on SVG text may work better.

Do many shadow layers slow the page down?

Large blurs on big blocks of text can cost repaint time, especially when animated. A long shadow of 16 sharp 1px layers is cheap on a heading but best avoided on body text.