CSS Text Shadow Generator
Stack text-shadow layers on your own words and font, check contrast, copy CSS or Tailwind.
Preview
Shadow
Contrast (WCAG 2.2)
Layers
The first layer is painted on top.
Layer 1
Presets
Code
Build or import
Long shadow
One hard layer per pixel, stretching away from the letters — the flat-design long shadow.
0° points right, 90° down, 180° left, 270° up.
3D extrude
Stacked 1px layers that darken toward the back, like a block of solid letters.
Outline
Copies of the text all around it, which look like a stroke. Wide outlines use more copies so there are no gaps.
Paste a text-shadow
About the CSS Text Shadow Generator
Build a CSS text-shadow on your own words. Type your text, pick a font — a system font stack, a font installed on your device or a font file you open (it stays on your device) — and set the size, weight, text color and background. Then stack as many shadow layers as you like, each with its own x and y offset, blur, color and opacity, and watch the preview change as you drag.
Start from a preset — subtle and soft drop shadows, Tailwind’s own shadows, soft glow, neon, long shadow, 3D extrude, outline, retro offset, hard shadow, letterpress, glitch or fire — or let a builder make the many layers that long shadows, extruded letters and outlines need. A WCAG 2.2 contrast check tells you whether the text color passes AA and AAA against the background at the size and weight you chose. Copy the result as CSS (optionally with the color and font), as a Tailwind v4.1 text-shadow-[…] class, or as a [text-shadow:…] arbitrary property for Tailwind v3.
How to use it
- Type your text under Your text, then choose the font, size, weight, text color and background.
- Pick a preset, or edit the layers: select a layer and drag the x, y and blur sliders, or set its color and opacity. Add layer, the arrows and the eye checkbox build up, reorder and compare layers — the first layer is drawn on top.
- For a long shadow, extruded 3D letters or an outline, open Build or import, set the options and select Use….
- Check the Contrast panel: it shows the ratio of the text against the background and whether it passes WCAG AA and AAA for this text size.
- Under Code, copy the CSS, the Tailwind v4.1 class or the Tailwind v3 arbitrary property, or download a .css file.
Examples
Preset: Subtle drop
text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
Preset: Neon cyan · Code: Tailwind v4.1+
text-shadow-[0_0_2px_rgb(255,255,255),0_0_8px_rgb(34,211,238),0_0_18px_rgb(6,182,212),0_0_36px_rgb(8,145,178)]
Neon is several glows on top of each other: a tight white core and wider, softer colored layers.
Long shadow builder: length 4px, direction 45°, rgb(0 0 0 / 0.4), fade out
text-shadow: 1px 1px rgb(0 0 0 / 0.4), 2px 2px rgb(0 0 0 / 0.3), 3px 3px rgb(0 0 0 / 0.2), 4px 4px rgb(0 0 0 / 0.1);
One hard layer per pixel; with fade on, each step loses the same share of the opacity.
Common uses
- Making headings readable on photos and busy backgrounds with a soft shadow or outline.
- Neon signs, glowing titles and retro posters for landing pages and game sites.
- Flat-design long shadows and extruded 3D letters for logos and banners.
- Checking that a styled heading still meets WCAG contrast before it ships.
How text-shadow works
Each layer is x y blur color (CSS Text Decoration Level 3 §4): the offsets move a copy of the text right and down (negative values move it left and up), and the blur radius softens its edges — it cannot be negative. Unlike box-shadow, text-shadow has no spread and no inset. Layers are separated by commas and the first layer is painted on top, so the tight inner glow of a neon effect comes first. A layer without a color uses the text color.
Effects that look like strokes or 3D blocks are just many hard layers: an outline places copies of the text in a circle around it (8 directions for 1px, more for wider outlines so no gaps show), and a long shadow or extrusion places one copy per pixel along a direction.
Contrast and readability
WCAG 2.2 SC 1.4.3 asks for a contrast ratio of at least 4.5:1 between text and its background, or 3:1 for large text — at least 18pt (24px), or 14pt (about 18.67px) when bold; SC 1.4.6 (AAA) asks for 7:1 and 4.5:1. The check here compares the text color with the background color; ratios are shown truncated, as WCAG requires (4.499 is not 4.5).
A shadow does not change that ratio, but it can help: a dark outline or halo directly behind light letters improves legibility on photos and changing backgrounds, which is why the panel also shows the contrast between the text and the first shadow layer. A heavy blur or a shadow close to the text color does the opposite and makes letters look fuzzy.
Limitations
- Only
text-shadowis generated. For a real stroke use-webkit-text-strokeor SVG text; text-shadow outlines are made of copies and look slightly bumpy at large widths. - The contrast check compares solid colors. Over images and gradients, check the lightest and darkest parts of the background yourself.
- Fonts typed by name show only when they are installed on this device. A font file you open is used only for this preview; your site needs its own @font-face rule.
- Paste a value, a declaration or a whole CSS rule (the last
text-shadowin it is used). Lengths may be px, rem or em (converted at 16px); other units such as vw, andvar()orcalc(), are not read. - Many layers (long shadows use one per pixel) cost more to paint; avoid animating them on large text.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What do the numbers in text-shadow mean?
Horizontal offset, vertical offset and blur radius, followed by the color: 2px 3px 4px #000 moves a black copy 2px right and 3px down and blurs it by 4px.
How do I make neon text in CSS?
Use a light text color on a dark background and stack glows from small to large: a 2px white glow, then 8px, 18px and 36px glows in your neon color. The Neon pink and Neon cyan presets are built that way.
How do I add an outline to text with CSS?
Open Build or import → Outline, set the width and color, and select Use outline. It writes hard shadows in 8 to 32 directions around the letters. -webkit-text-stroke is an alternative, but it draws the stroke over the letter shapes and thins them.
Does Tailwind CSS have text-shadow utilities?
Yes, since v4.1: text-shadow-2xs to text-shadow-lg, colors such as text-shadow-sky-300, and arbitrary values like the text-shadow-[…] class this tool writes. In Tailwind v3 use the arbitrary property [text-shadow:…].
Why does the contrast check ignore my shadow?
WCAG contrast is measured between the text and the background behind it. The panel also shows text versus the first shadow layer, which is useful for outlines and halos, but a passing ratio there does not replace the main check.
Is my font file uploaded?
No. The font is read in your browser for the preview and is never sent anywhere; the page works offline once loaded.