Ttooleras
✨

CSS Text Shadow Generator

CSS Tools

Create text glow, emboss, outline, and 3D effects with CSS text-shadow. Free, private — all processing in your browser.

Text shadow
Layer 1
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.50);
Advertisement

Drag the sliders and watch your heading update live, then copy the CSS. This builds the text-shadow property: horizontal and vertical offset, blur, color, and opacity, with as many stacked layers as you want. Type your own sample text, pick the text and background colors, and size it up so you're previewing on something close to your real design.

Text shadows are one of those CSS features that's easy to overdo. A single soft shadow adds depth to a heading; four hard-offset layers give you an outline; a couple of zero-offset blurred layers make a neon glow. The presets show each of these so you can start from something that works and tweak from there.

The output is plain text-shadow CSS — paste it straight into your stylesheet or a style attribute. This is for text specifically; if you want a shadow on a box or card, that's box-shadow, which takes an extra spread value and an inset option that text shadows don't have.

Features at a glance

Preset effects

Glow, emboss, deboss, outline, 3D, long shadow — one-click starting points.

Multiple shadow layers

Stack up to 20 shadows for complex effects. Each with position, blur, color.

Live preview on text

Adjust font size, weight, color, and background to see shadow in context.

Color picker with opacity

Full color control including alpha for semi-transparent shadows.

Readability-optimized

Subtle shadow preset specifically designed for text over images/gradients.

Long shadow generator

Auto-generate 30+ layered shadows for flat-design long shadows with single slider control.

Contrast checker

Warns if shadow effect reduces text readability below accessibility standards.

Copy CSS

Complete text-shadow value ready for your stylesheet.

How to use the CSS Text Shadow Generator

  1. 1

    Pick an effect preset

    Subtle, glow, emboss, outline, 3D, long shadow — or start custom.

  2. 2

    Type your text

    Preview with actual text content. Adjust font-size, weight, color.

  3. 3

    Adjust shadow parameters

    Offset X/Y, blur, color. For multi-layer effects, add layers.

  4. 4

    Test on different backgrounds

    Change preview background to test shadow on light vs dark vs image.

  5. 5

    Check contrast

    Ensure text remains legible with shadow. Adjust if needed.

  6. 6

    Copy CSS

    Paste into your stylesheet on the target element.

Where this helps

Typography for hero sections

  • →Headline readability over hero image: Text directly on photos needs shadow to stand out. Subtle dark shadow (2px blur) adds critical readability.
  • →Hero gradient text: Gradient text (background-clip: text) often needs small shadow for edge definition.
  • →Display/headline typography: Marketing headlines benefit from slight 3D or depth effects.

Special effects

  • →Neon glow signs: Multiple colored glow shadows. Dark background, bright text with colored halos.
  • →Retro/vintage text: Long shadows or 3D effects evoke retro aesthetic.
  • →Game UI: Bold outlined text for games, scores, call-outs.
  • →Sticker/badge text: Thick outlines make text pop on colorful backgrounds.

Readability enhancement

  • →Caption text on images: Photo + text captions need shadow to stay readable.
  • →Subtitles over video: Dark shadow for subtitles on any video background.
  • →Text on dynamic backgrounds: Dark-mode toggles, theme switches — shadow keeps text readable across themes.
  • →Map labels: Place names on varied map terrain need shadow.

Subtle UI polish

  • →Button label depth: 1-2px subtle shadow adds tactile feel to button text.
  • →Logo text: Logo typography often uses subtle shadow for brand personality.
  • →Navigation text emphasis: Subtle shadow on nav items can make them pop without changing layout.
  • →Notification badge text: Colored numbers on badges need shadow for legibility.

Worked examples

Subtle readability

Text over image.

Input
2px Y, 4px blur, 50% black
Output
.hero-text {
  text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5);
}

Neon glow

Magenta neon sign effect.

Input
Multiple layered glows
Output
.neon {
  color: white;
  text-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff;
}

Text outline

4-way shadow simulating stroke.

Input
1px shadows in 4 directions
Output
.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
/* Modern alternative: -webkit-text-stroke */

Embossed effect

Carved-into-page look.

Input
Light highlight + dark shadow
Output
.embossed {
  color: #ddd;
  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #333;
  background: #eee;
}

3D depth

Layered shadows for perspective.

Input
Multiple progressively-darker layers
Output
.depth-3d {
  color: #333;
  text-shadow:
    0 1px 0 #c9c9c9,
    0 2px 0 #bbb,
    0 3px 0 #b9b9b9,
    0 4px 0 #aaa,
    0 5px 0 #a7a7a7,
    0 6px 1px rgb(0 0 0 / 0.1),
    0 3px 5px rgb(0 0 0 / 0.2);
}

Long shadow

Flat design long shadow.

Input
Many 1px-step layers
Output
.long-shadow {
  color: #e74c3c;
  text-shadow:
    1px 1px 0 #c0392b,
    2px 2px 0 #c0392b,
    3px 3px 0 #c0392b,
    /* ... 20 more steps for dramatic shadow */
    20px 20px 0 #c0392b;
}

Modern text stroke

Better than 4-way shadow outline.

Input
webkit-text-stroke
Output
.text-stroke {
  color: white;
  -webkit-text-stroke: 2px black;
  paint-order: stroke fill;
}

How it works

Each layer produces one text-shadow value in the form offset-x offset-y blur-radius color. Multiple layers are comma-separated and stack front-to-back, with the first layer painted closest to the text. Unlike box-shadow, text-shadow has no spread radius and no inset keyword — those simply don't exist for text.

Colors are emitted as rgba() so the opacity slider maps directly to the alpha channel. That's what makes soft shadows read as subtle: a black shadow at 40% opacity blends with the background instead of sitting as a solid slab behind the letters. Offsets and blur are in pixels; negative offsets push the shadow up and to the left, which is how the outline preset places shadows on all four sides.

The live preview applies the exact CSS string to real text, so what you see is what the browser renders. Everything happens in your browser — no processing server, nothing saved.

Troubleshooting

⚠text-shadow is not box-shadow

This generates shadows for text glyphs. Boxes, cards, and buttons use box-shadow, which adds a spread radius and an inset option. Don't paste text-shadow output where you meant box-shadow.

⚠No spread radius exists for text

Unlike box-shadow, text-shadow has only x, y, blur, and color. There's no way to 'grow' a text shadow with spread — outlines are faked by stacking multiple offset layers.

⚠Heavy shadows hurt readability

Large blur or high-opacity shadows can smear letters and reduce contrast. For body text, keep shadows subtle; save the dramatic multi-layer effects for large display headings.

⚠Layer order matters

Stacked shadows paint in order, first on top. If a glow or outline looks wrong, try reordering the layers — the topmost value can hide the ones behind it.

⚠Performance on large text areas

Many blurred shadow layers repainted on scroll or animation can cost paint performance. Use them on static headings rather than large scrolling text blocks.

CSS Text Shadow Generator — comparisons and alternatives

This tool is text-shadow only, and that focus is deliberate: the controls match exactly what text shadows support, so there are no confusing spread or inset options that would silently do nothing. If you need a shadow on a container, button, or image, use a box-shadow generator instead — the two properties look similar but aren't interchangeable.

Compared to writing text-shadow by hand, the win is the live preview and the multi-layer presets. Stacked shadows (outline, 3D, glow) are fiddly to visualize in your head; here you can see them instantly and copy the result. For a one-off simple shadow you might just type it, but for anything layered this is faster.

Frequently asked questions about the CSS Text Shadow Generator

▶What's the difference between text-shadow and box-shadow?

text-shadow applies to the text characters themselves and supports offset-x, offset-y, blur, and color. box-shadow applies to an element's box and adds a spread radius plus an optional inset keyword. This tool generates text-shadow only.

▶How do I make an outline around text?

Stack four hard shadows (blur 0) offset by 1px in each diagonal direction: top-left, top-right, bottom-left, bottom-right. The 'Outline' preset does exactly this. For crisper results at larger sizes, increase the offset.

▶How do I create a neon glow effect?

Use two or more layers with zero offset and increasing blur in the same bright color, at slightly lower opacity as they get larger. The 'Neon glow' preset demonstrates this. Pair it with a dark background.

▶Why use rgba instead of hex for the color?

The opacity slider controls the shadow's alpha channel, which rgba expresses directly. A semi-transparent shadow blends with whatever is behind it, producing the soft, natural look that a fully opaque shadow can't.

▶Can I use multiple text shadows at once?

Yes. Add as many layers as you like — they're combined into one comma-separated text-shadow value. This is how outlines, 3D lettering, and layered glows are built.

Further reading

Advertisement

Related tools

All CSS Tools
♿

Color Contrast Checker

Check color contrast ratios between foreground and background for WCAG 2.1 AA and AAA compliance with live preview.

🎨

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, Lab, LCH color formats

🎬

CSS Animation Generator

Build CSS keyframe animations and transitions with live preview and easing curves

⬜

CSS Border Radius Generator

Generate CSS border-radius — from simple rounded corners to organic blob shapes

🔲

CSS Box Shadow Generator

Create realistic CSS box shadows — single, layered, inset, neumorphism styles

📐

CSS Flexbox Playground

Build flex layouts interactively — see changes live, copy production CSS

Learn more

Next.js App Router: A Complete Beginner Tutorial

26 min read

Why a single emoji breaks string length

26 min read

Base64 Encoding Explained: How It Works and When to Use It

14 min read

Explore more tools

200+ free tools that run in your browser.

Browse all tools →