Free · Fast · Privacy-first

CSS Text Shadow Generator

The CSS text-shadow property applies a shadow directly to rendered text glyphs rather than to the element box that contains them.

⚡

Live preview of text-shadow on sample heading text

🔒

Controls for offset, blur, and colour with alpha

✨

Supports multiple layered text shadows

⚡

Instant CSS output ready to copy

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Shadow Effect Builder to your website

Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How text-shadow Works on Glyph Outlines and When to Use Each Style

The text-shadow property applies a shadow to each individual glyph in the rendered text, using the glyph's actual rendered outline as the shadow source rather than the bounding box of the text element. The property accepts four values per shadow: horizontal offset, vertical offset, blur radius, and colour, in that order. Unlike box-shadow, text-shadow has no spread radius and no inset keyword, which makes it slightly less flexible but easier to reason about for typography work. Horizontal and vertical offsets control direction and distance from each glyph, blur radius softens the shadow edge, and colour sets both the hue and the opacity through any standard rgba() or hsla() value. Multiple shadows can be stacked by separating declarations with commas in the same property value, with the first shadow in the list appearing visually on top.

Three distinct text-shadow patterns appear repeatedly in production interfaces and represent the bulk of professional usage. First, a subtle 1 pixel offset dark shadow on white or light-coloured text over a photographic background dramatically improves readability without visually altering the text itself. A value like text-shadow: 0 1px 2px rgba(0,0,0,0.5) is almost invisible on dark text on a white background but makes light text legible against busy photo backgrounds at every exposure. Second, a saturated coloured shadow with zero offset and medium blur on dark backgrounds creates a convincing neon glow: text-shadow: 0 0 12px rgba(0,220,255,0.8) on a near-black background produces an electric blue glow that reads as illuminated rather than flat. Third, a hard offset with zero blur in a contrasting colour replicates the look of letterpress or screen-printed display type: text-shadow: 3px 3px 0 #cc3300 on dark text creates a bold retro effect popular in editorial and brand work.

One accessibility consideration applies specifically to text-shadow and is easy to overlook during design. Heavy text shadows that reduce the perceived contrast between text glyphs and their adjacent background can cause a design to fail WCAG 2.1 contrast requirements even when the base text colour technically passes the contrast checker in isolation. A white heading with a large coloured glow shadow, for instance, might meet the 4.5:1 contrast ratio for white-on-background measurement, but the bright glow effectively lightens the perceived background around each glyph and reduces real-world contrast. Always verify your text shadow choices with a contrast checker after adding the shadow, particularly for shadows with significant blur, large offsets, or saturated colours that bleed into the perceived background area around the text.

Combining text-shadow with other CSS properties unlocks polished effects that single-property styling cannot achieve. Pairing text-shadow with letter-spacing and font-weight produces editorial-grade headlines: a tight letter-spacing with a heavy weight and a subtle drop shadow creates the feeling of premium print typography. Pairing text-shadow with a coloured outline via -webkit-text-stroke produces stickered or comic-book lettering. Pairing text-shadow with a CSS transition makes shadows animate smoothly on hover, useful for interactive headlines that react to user attention. The property is composable and lightweight, making it one of the highest-leverage typography tools in the CSS toolkit.

MDN: text-shadow W3C CSS Backgrounds Specification

How to use this tool

💡

Type or paste your heading text into the preview field, then adjust offset and blur sliders to position the shadow. Choose a colour and opacity that complements your background. Copy the text-shadow declaration when the result looks right.

How It Works

Step-by-step guide to css text shadow generator:

1
Enter your heading text in the preview
Type the actual heading text you intend to style into the live preview panel so the shadow renders against your real content rather than generic placeholder copy. Real text reveals issues that placeholder text hides, such as ascenders and descenders interacting awkwardly with the shadow offset, or specific letterform combinations producing unexpected results. Always preview with the actual font and weight you plan to use in production.
2
Set offset and blur
Drag the offset sliders to set the shadow direction and distance from each glyph, then adjust the blur slider to soften or sharpen the shadow edge. For legibility shadows on photo backgrounds, keep both offset values low (0 to 2 pixels) and blur moderate (2 to 4 pixels). For neon glows, set offsets to zero and push blur higher. For retro hard-edge effects, push offsets higher and keep blur at zero for the crispest possible shadow.
3
Choose a colour and opacity
Select a shadow colour with the picker and use the alpha slider to control transparency precisely. For subtle legibility shadows that improve readability without altering the visual character of the text, keep alpha below 0.5 and favour dark neutral colours. For decorative effects like neon glows and embossed treatments, use higher alpha values and consider saturated brand colours rather than pure black or white for more interesting visual results.
4
Copy the text-shadow declaration
Click Copy CSS and paste the generated text-shadow value into your heading rule in the stylesheet. The output is browser-ready CSS that works in every modern browser without prefixes. If you stacked multiple shadow layers in the builder, the copied output contains the full comma-separated list ready to use as a single property value. For maintainability, consider storing the shadow value in a CSS custom property so multiple headings can share the same shadow definition.

Real-world examples

Common situations where this approach makes a real difference:

Hero heading over a full-width background photo

A marketing developer is placing a large white heading over a landscape photograph that varies from light sky to dark mountain across its width. Without a shadow, the heading becomes unreadable wherever it overlaps the lighter sky areas because the white text on white background offers no contrast at all. Adding text-shadow: 0 1px 4px rgba(0,0,0,0.6) creates a subtle dark halo around each letter that makes the white text legible at every photo exposure level without obscuring the photo content itself or making the heading look heavy or stylised.

Neon sign heading for a nightclub website

A designer building a nightlife venue website needs a heading that reads convincingly as a neon sign against a near-black background. Using two stacked text-shadows, one tight at 0 pixel blur for the bright inner glow and one wide at 20 pixel blur for the outer haze, both in saturated electric teal, produces a glow effect that mimics real neon tube lighting. The heading becomes the focal point of the entire page without requiring any custom imagery or sprite assets, and the effect remains crisp at any responsive font size from mobile to desktop.

Retro game title screen typography

A developer is building a browser game title screen and wants type that recalls 1980s arcade cabinet branding and screen-printed game packaging. They set a hard 4 pixel diagonal offset with 0 blur in deep saturated orange against a dark navy background for the game title, creating a screen-print shadow effect that suits the retro aesthetic perfectly without requiring any custom imagery or sprite work. The pure CSS implementation scales cleanly to any resolution and supports localisation to other languages without rebuilding image assets for each region.

Embossed section headings on a textured background

A designer is using a light parchment texture as the background for a recipe site, and the section headings need to look as if they have been pressed into the parchment surface itself rather than printed on top of it. Combining a dark shadow below and a white highlight shadow above the heading text creates a believable embossed effect that integrates visually with the texture and looks deliberately crafted rather than digital. The result reinforces the handcrafted aesthetic of the site without requiring custom image files for each heading.

When to use this guide

Use this when you need to add depth or legibility to heading text, create a neon glow effect, or build a retro print-style offset shadow on display typography.

Pro tips

Get better results with these expert suggestions:

Build retro type effects with hard 0-blur shadows

Setting blur-radius to 0 produces a perfectly crisp offset copy of the text rendered behind the original glyphs. Combine this with a bold typeface and a contrasting colour offset 2 to 4 pixels diagonally to mimic the look of screen-print or letterpress display type. The technique works best at display sizes of 36 pixels and above, where the glyph forms are large enough that the offset reads as a deliberate design choice rather than an accidental rendering artifact. Editorial publications and brand campaigns use this pattern frequently for hero headlines and section breaks.

Add a second shadow in white for embossed text

Combining a dark shadow below the text and a white shadow above creates a believable three-dimensional embossed appearance reminiscent of carved type or pressed paper. Use text-shadow: 1px 1px 2px rgba(0,0,0,0.4), -1px -1px 2px rgba(255,255,255,0.7) on text against a medium-grey background. The opposing shadow directions imply directional lighting from the upper left, with the white highlight catching the raised top edge of each glyph and the dark shadow falling away below. The effect works best on medium-grey backgrounds where both highlight and shadow have room to read.

Keep text shadows off body text

Text-shadow at body text sizes between 14 and 18 pixels actively reduces legibility rather than enhancing it. Even a subtle 1 pixel shadow at small sizes makes text appear heavier, slightly blurred, and harder to scan over long reading sessions. Reserve text-shadow exclusively for display headings at 32 pixels and above, where the glyph size is large enough to absorb the shadow without degrading clarity. Using text-shadow on body copy is one of the most common mistakes in amateur typography and consistently undermines reading comfort and accessibility.

Use CSS custom properties to make shadows theme-aware

Declare your text-shadow colours using CSS custom properties at the root level, for example --heading-shadow: rgba(0,0,0,0.3) for light mode. Override this property in a dark-mode media query or a .dark class to swap shadow colours automatically when the user changes themes. One change to the custom property definition updates every heading shadow that references the variable simultaneously, with no need to touch individual component rules. This approach scales cleanly across large design systems with many heading styles and multiple supported themes.

Use 0-offset shadows for legibility on photo backgrounds

Set both offsets to 0 and use a small blur (1-3px) with a semi-transparent dark colour to create a soft halo behind text without a visible directional shadow. This technique is standard for hero text over photography.

Stack two shadows for a neon glow

A convincing neon effect uses two shadows: one at low blur for the tight inner glow and one at high blur for the outer haze. Example: text-shadow: 0 0 4px #fff, 0 0 20px rgba(0,200,255,0.9).

Check contrast ratios after adding shadows

Text shadows that bleed colour into the perceived background area can affect how contrast-checking tools measure your text. Run a quick accessibility check after finalising any text-shadow to confirm WCAG AA compliance.

FAQ

Frequently asked questions

Yes, text-shadow applies to any element containing rendered text, including headings at every level, paragraphs, spans, anchors, buttons, form labels, list items, table cells, and any custom element that renders text content. It processes the glyph outlines of the actual rendered text, so it works regardless of font-family choice, font-size, font-weight, font-style, or any other typography property. The effect is most visible and useful at larger font sizes where the glyph detail is clear and the shadow has room to read as a distinct visual element. At small sizes it tends to muddy the text rather than enhance it, so most production design systems restrict text-shadow use to display headings only.

Yes, CSS text-shadow accepts a comma-separated list of shadow declarations within a single property value. The first item in the list renders visually on top, with each subsequent item rendered beneath it. Layering two or three shadows with different blur and colour values creates effects that would be impossible to achieve with a single shadow, including convincing neon glows that combine a tight inner shadow with a wider outer halo, embossed text effects using opposing light and dark shadows, multi-colour outline effects that suggest stickered or comic-book lettering, and stylised retro looks that combine a hard offset with a soft ambient shadow for additional depth.

No, the text-shadow property does not support a spread radius parameter. It accepts only four values per shadow: horizontal offset, vertical offset, blur radius, and colour, in that order. To create a wider shadow effect with text-shadow, the only option is to increase the blur radius, which softens the shadow as it grows rather than maintaining hard edges at a larger size the way spread would. For a text outline effect, use multiple stacked shadows at small offsets in all four cardinal directions rather than reaching for a spread value that does not exist. The result is close to a true outline but not perfectly even at the corners.

Technically yes, but somewhat imprecisely compared to the dedicated outline approach. By stacking four text-shadows at 1 pixel offsets in each cardinal direction (top, bottom, left, right) with zero blur, you can simulate an outline around the text. The result is visually close to a true outline but slightly uneven at the diagonal corners where adjacent shadows do not fully meet. For pixel-perfect text outlines, the -webkit-text-stroke property provides much better results and is supported in all modern browsers despite the vendor prefix in its name. Use text-shadow for outline effects only when you need the outline to be soft or coloured, where -webkit-text-stroke cannot reach.

It can affect accessibility in subtle but meaningful ways that are easy to miss during design review. Heavy text shadows that add strong colour contrast between the glyph and the shadow region can affect perceived contrast ratios, even when the base text colour passes WCAG 2.1 contrast measurement in isolation. WCAG measures contrast between text and its adjacent background, but a large glow shadow effectively lightens or darkens the area around the text, changing the perceived background for contrast purposes. Always verify contrast with an accessibility checker after adding any text-shadow to content text, particularly when the shadow has significant blur or saturated colour that bleeds into the surrounding area.

Yes, text-shadow is fully animatable using both CSS transitions and CSS @keyframes animations. Adding transition: text-shadow 0.2s ease to a heading and changing the shadow value in a :hover or :focus rule produces a smooth animation that interpolates between the shadow states. Pulsing neon glow effects are commonly built with @keyframes that cycle through different blur radii and opacity values on the text-shadow property at infinite duration. For more dramatic effects, combine text-shadow animation with color or letter-spacing animation in the same transition for compound interactions. Test on mobile to confirm acceptable frame rate when animating shadows with high blur values.

Text-shadow is composited entirely by the GPU in all modern browsers and has negligible performance cost on static text, regardless of font size or shadow complexity within reasonable limits. Animating text-shadow on elements that reflow frequently, such as text inside a scrolling container that resizes, can be measurably more expensive because each layout change triggers a new compositing pass. For scroll-animated text or text inside heavily animated components, keep text-shadow values simple (one or two layers, moderate blur values under 20 pixels) to minimise compositing work during animation frames. Avoid applying text-shadow to long body text that reflows during dynamic content updates.

Yes, text-shadow is an inherited CSS property, meaning that setting text-shadow on a parent element automatically applies the same shadow to all descendant elements containing text, unless explicitly overridden by a more specific rule. This inheritance behaviour is useful for applying a consistent legibility shadow to all text within a hero section with one parent declaration, but it can produce unexpected results on nested elements that already have their own shadow definitions, where the more specific child rule will completely replace rather than combine with the parent shadow. Use text-shadow: none to explicitly remove an inherited shadow from a specific descendant.

Text-shadow rendering in print depends on the browser and the printer driver, with results varying significantly across environments. Most modern browsers respect text-shadow in print preview and in PDF export, rendering the shadows accurately. However, some browser-printer combinations strip shadow effects to conserve toner or simplify rendering, particularly on monochrome printers. If text-shadow is important for the printed appearance of a document, test the actual print output in your target environments rather than assuming the on-screen preview matches. For purely decorative shadows on web headings, the print rendering inconsistency is usually not worth working around.