Open menu

CSS Text Shadow Generator

Stack up to six text-shadow layers and see them on your own words. Drag offsets, adjust blur, color and opacity, or start from 20 presets such as soft lift, neon, fire, letterpress, emboss, outline and retro. The contrast check keeps the text readable, and you can export CSS, a custom property, SCSS or Tailwind.

Preset gallery

Shadow text

Accessibility checks

  • Pass The text has 17.7:1 contrast with the background, which meets WCAG AA.
  • Pass The shadows support the letters without blurring their edges.

Export code

.shadow-text {
  color: #111827;
  font-size: 72px;
  font-weight: 800;
  text-shadow: 0px 2px 4px rgba(15, 23, 42, 0.3);
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Layers
Offset (drag)
Shadow color
Text

How to use the text shadow generator

  1. Pick a preset: soft, bold, glow, emboss or blur.
  2. Type your own text and set its color, size, weight and the background it will sit on.
  3. Edit layers. Select a layer, drag its offset on the pad (arrow keys work too), and set blur, color and opacity. Add or duplicate layers for richer effects.
  4. Paste an existing text-shadow value to continue editing it.
  5. Check contrast and legibility, then copy the code.

Recipes

  • Soft lift: 0 2px 4px at 25% opacity plus 0 8px 16px at 15%.
  • Neon: a small white glow, then two colored glows with 12px and 32px blur. Works best on dark backgrounds.
  • Letterpress: one light shadow 1px below the text, on a mid-grey background, makes letters look pressed into paper.
  • Emboss: a light shadow up-left and a dark one down-right.
  • Retro: two or more hard shadows (0 blur) in different colors, offset diagonally.
  • Long shadow: many 1px hard steps in one direction. Try the Long preset, or the dedicated long-shadow style in the text effects studio.

Performance and accessibility

Text shadows are painted with the text, so a few layers cost very little. Dozens of layers on large paragraphs can slow scrolling. Keep heavy stacks for headings. Shadows never count towards contrast: the text color itself must contrast with the background.

How it works

text-shadow takes one or more shadows separated by commas. Each has a horizontal offset, a vertical offset, an optional blur radius and a color, and the first shadow is drawn on top. Several small shadows with no blur, offset in different directions, create outlines and long shadows; large blurs in a bright color create glows. The generator builds that list from your layers and checks how readable the text stays against the background.

Worked examples

Example 1: a hero headline over a photo

Load On photo. It combines a tight dark shadow (1px offset, 3px blur, 60% opacity) with a wide 12px halo at 40%. White headline text keeps its edges crisp while the halo separates it from bright parts of the image. For long subtitles, add a dark overlay on the photo as well, because shadows only help so much with small text.

Example 2: a neon sign for a dark landing page

Load Neon pink and change the text to your product name. Set the size to 96px and keep the background near black. The white inner glow makes the letters look lit from inside, while the two pink glows spread the light. To make it calmer, lower the opacity of the widest layer to around 0.5.

Example 3: a vintage label

Load Retro, then pick two colors from your brand palette for the stacked shadows. Hard shadows with no blur, offset 3px and 6px diagonally, give a screen-printed look that suits badges, menus and posters. Increase the offsets for bigger headings so the steps stay visible.

Common mistakes

  • Glow on long paragraphs: keep effects for headings and short labels.
  • Low opacity on light backgrounds: dark shadows at 10% barely show; use 20–30%.
  • Forgetting the base contrast: the text color itself must pass, with or without the shadow.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads text-shadow layers, color, font-size and font-weight. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

How is text-shadow different from box-shadow?

text-shadow follows the shape of each letter instead of the element's box, and it has no spread or inset values. Each layer is just x, y, blur and color.

Can text-shadow make outlined text?

Yes, approximately: four hard shadows offset up, down, left and right by 1–2px draw an outline around the letters. It works everywhere, unlike -webkit-text-stroke, but corners can look slightly blocky at large widths.

Does a shadow improve readability on photos?

A soft dark shadow helps white text stand out over busy images, but it doesn't replace real contrast. For important text on photos, also add a dark overlay or a solid background behind the text.

Why does the legibility check warn about glows?

Strong, wide glows blur the edges of the letters, especially at smaller sizes. They work for big headings, but keep body text crisp.

Can I use several shadows at once?

Yes. Separate them with commas; the first one is drawn on top. Several small offset shadows make outlines, long shadows and neon glows.

Sources