How It Works
The CSS text-shadow property adds one or more shadows to text. Each shadow is defined by a horizontal offset, vertical offset, optional blur radius, and color. The browser composites them in order -- the first shadow sits on top. This generator lets you stack up to five layers and preview the combined result in real time.
Adjust each layer's offsets, blur, and color using the sliders, or start from one of the built-in presets (neon, retro, emboss, fire, simple drop). When you are happy with the look, copy the generated CSS and drop it into your stylesheet.
Text Shadow Syntax
The text-shadow property accepts a comma-separated list of shadows. Each shadow follows this pattern:
text-shadow: h-offset v-offset blur-radius color;| Value | Required | Description | Example |
|---|---|---|---|
h-offset | Yes | Horizontal distance. Positive moves right, negative moves left. | 2px |
v-offset | Yes | Vertical distance. Positive moves down, negative moves up. | 2px |
blur-radius | No | How much the shadow is blurred. Defaults to 0 (sharp edge). | 4px |
color | No | Shadow color. Any CSS color value. Defaults to the text color. | rgba(0,0,0,0.4) |
Multiple shadows are separated by commas. They render back-to-front, so the first shadow in the list appears on top.
Text Shadow vs Box Shadow
Both properties add shadows, but they apply to different things and have different capabilities.
| Feature | text-shadow | box-shadow |
|---|---|---|
| Applies to | Text glyphs only | Element's bounding box |
| Spread radius | Not supported | Supported |
| Inset shadow | Not supported | Supported via inset |
| Follows shape | Yes (follows letter outlines) | No (always rectangular/rounded) |
| Performance | Lightweight | Slightly heavier with large spread |
| Multiple layers | Yes, comma-separated | Yes, comma-separated |
| Common use | Headings, neon effects, legibility | Cards, buttons, modals, depth |
FAQ
How many text-shadow layers can I use?
CSS does not impose a hard limit. This generator caps it at five for usability, but browsers handle dozens without issues. Keep in mind that each layer adds rendering work -- four or five layers is the practical sweet spot for effects like neon glow or 3D text.
Does text-shadow affect accessibility?
Heavy shadows can reduce text legibility, especially for users with low vision. Avoid pure decorative shadows on body text. For headings and hero text, check that the contrast ratio between the text color and background still meets WCAG AA standards. Subtle shadows that increase contrast against a busy background actually help accessibility.
Can I animate text-shadow with CSS?
Yes. text-shadow is animatable with CSS transitions and keyframes. Use transition: text-shadow 0.3s ease for hover effects. Be mindful of performance on large text blocks -- browsers need to repaint the shadow on every frame. For smooth animations, stick to simple shadows (one or two layers) and avoid very large blur values.
Is text-shadow supported in all browsers?
text-shadow has excellent browser support. It works in Chrome 2+, Firefox 3.5+, Safari 4+, Edge 12+, and all modern mobile browsers. No vendor prefixes are needed. The only exception is IE 9 and below, which do not support it at all. For those legacy browsers, the text simply renders without a shadow -- a clean graceful degradation.
Try the Glassmorphism Generator to create frosted-glass UI panels, or use the Color Converter to find the perfect shadow color in any format.