Text Shadow Generator
Design CSS text-shadow effects visually. Add multiple shadow layers, adjust offset, blur, and color for each. Preview your text in real-time and copy the generated CSS code.
Key features
- Multiple shadow layer support
- Per-layer offset, blur, and color control
- Preset effects (neon, emboss, retro, 3D)
- Editable preview text
Guide
The CSS text-shadow property adds shadow layers behind text characters. It serves both functional and decorative purposes: improving text legibility on busy backgrounds, creating depth and dimension, producing neon glow effects, building retro and vintage typographic styles, and adding subtle polish to headings and display text. This guide covers the syntax, layering techniques, common effects, performance considerations, and practical design patterns. The text-shadow syntax takes two to four values plus an optional color: text-shadow: offset-x offset-y blur-radius color. The offset-x value moves the shadow horizontally (positive moves right, negative moves left). The offset-y value moves the shadow vertically (positive moves down, negative moves up). The blur-radius value controls how diffuse the shadow is (0 creates a sharp-edged copy, higher values create softer shadows). The color value sets the shadow color (defaults to the text color if omitted). Example: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) creates a soft dark shadow offset down and to the right. Multiple shadows are comma-separated, and each shadow is rendered in order (first shadow on top). This layering capability is what enables complex effects. text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666 creates a stacked 3D effect with three shadow layers at increasing offsets. The first shadow (closest to the text) is darkest, and each subsequent shadow is lighter, simulating depth. There is no limit to the number of shadows you can stack, though performance degrades with very high counts (generally above 10 to 15 blurred layers). The blur radius determines the shadow type. A blur radius of 0 creates a hard copy of the text, useful for 3D extrusion effects, outlines, and stacked shadows. A small blur radius (1px to 3px) creates a subtle, tight shadow suitable for improving text legibility. A medium blur radius (4px to 8px) creates a visible but soft shadow for heading emphasis. A large blur radius (10px to 30px) creates a glow effect where the shadow spreads well beyond the text outline. Very large blur radii (40px+) create ambient glow effects. The blur algorithm is a Gaussian blur, meaning the shadow intensity falls off smoothly from the center. Legibility shadows are the most practical application. When text sits on a photograph, gradient, or patterned background, a subtle shadow improves readability without adding a solid backdrop. For light text on varied backgrounds: text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6). For dark text on varied backgrounds: text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8). The key is keeping the offsets small (0 to 1px) and the blur soft (2px to 4px) so the shadow supports the text without being noticed as a visual element itself. This technique is widely used in hero sections, banner text, and any text overlaid on images. The direction of shadow offsets communicates a light source. A shadow offset to the bottom-right (positive x, positive y) implies a light source at the top-left, which is the most common convention in UI design and matches how we perceive physical objects lit from above. A shadow offset straight down (0 x, positive y) implies an overhead light source. Consistent shadow direction across all elements on a page maintains the illusion of a unified light source. Mixing shadow directions (one element shadowed to the right, another to the left) creates visual inconsistency. Neon glow effects use large blur radii with bright, saturated colors. The technique layers multiple shadows at zero offset with increasing blur radii. A basic neon effect: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa. The inner shadows are white (simulating the bright core of a neon tube), and the outer shadows use the glow color. Set the text color to white and the background to dark (near-black) for the full neon effect. Pair with a font that has thin strokes (like a monoline or script font) to mimic actual neon signage. Neon flickering can be added with CSS animations that cycle between slightly different shadow configurations. A keyframe animation that alternates between the full shadow set and a reduced version (fewer layers, lower blur radii) every 0.1 to 0.5 seconds creates a convincing flicker. Add animation timing variations (steps(), random-looking durations) to make the flicker feel natural rather than mechanical. This effect is popular for retro-themed landing pages, game interfaces, and portfolio sites. 3D extrusion effects create the illusion of depth by stacking hard shadows at progressive offsets. A basic 3D text effect: text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555. Each layer is one pixel further from the text, building up an extruded appearance. For a more refined effect, darken each successive layer: text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%). Adding a soft shadow after the hard layers (5px 5px 10px rgba(0,0,0,0.4)) grounds the 3D text with a cast shadow. Long shadow effects extend the 3D extrusion concept to many more layers, creating shadows that stretch across the background. A long shadow might stack 50 or more layers, each offset by 1px with gradually fading color. Generating these by hand is impractical. Use a CSS preprocessor (Sass or Less) with a loop to generate the shadow layers programmatically. In Sass: $shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0.5 - $i * 0.01)), comma); } text-shadow: $shadow. The result is a dramatic diagonal shadow stretching behind the text. Outline (stroke) effects use multiple hard shadows at zero or small offsets to create a text outline. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 places sharp shadows at all four diagonal corners, surrounding the text in a 1px outline. For a more complete outline, add shadows at the cardinal directions too: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000. For a thicker outline, increase offsets to 2px and add intermediate positions. Note that CSS also has -webkit-text-stroke for text outlines, which provides smoother results but only works in WebKit/Blink browsers. The text-shadow approach is more universally supported. Retro and vintage text effects combine text-shadow with specific fonts and color palettes. A letterpress (debossed) effect uses a dark shadow slightly above and a light shadow slightly below: text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3). Apply this to gray text on a medium gray background. The dark shadow above suggests the text is pressed into the surface, while the light shadow below catches the light on the lower edge. A raised (embossed) effect reverses the shadows: light on top, dark on bottom. Both effects work best with heavier font weights and muted color palettes. Fire, ice, and elemental text effects layer many shadows with color gradients. A fire effect might use: text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e. Each layer moves upward (negative y-offset) with increasing blur, transitioning from bright yellow at the base through orange to dark red, simulating flame. An ice effect uses the same technique with blue and white tones, with shadows extending downward. These decorative effects are best reserved for headings on creative projects, game interfaces, and promotional materials. Performance of text-shadow is generally good for typical use cases (one to three shadow layers). Each shadow layer requires the browser to render an additional copy of the text with the specified color, offset, and blur. Hard shadows (blur-radius: 0) are cheap because they are simple offset copies. Blurred shadows are more expensive because the browser must compute a Gaussian blur for each layer. Stacking 8+ blurred shadows (as in neon effects) on large text that is animated or on a frequently repainted area can impact frame rate on lower-end devices. For animated text with heavy shadows, test on target devices and consider reducing shadow count on mobile. Animating text-shadow with CSS transitions creates engaging hover effects. A common pattern transitions from no shadow to a visible shadow on hover: transition: text-shadow 0.3s ease. Animating between two complex multi-layer shadows works but requires both states to have the same number of shadow layers. If the initial state has three layers and the hover state has five layers, the transition will not interpolate smoothly for the additional layers (they will pop in rather than fade). Keep layer counts consistent between animation states for smooth transitions. Text-shadow with CSS custom properties enables themeable, maintainable effects. Define your shadows as custom properties: --shadow-heading: 2px 2px 4px rgba(0,0,0,0.3). Reference them in your styles: text-shadow: var(--shadow-heading). In dark mode, redefine the property: --shadow-heading: 2px 2px 8px rgba(0,0,0,0.7) (stronger shadow needed on dark backgrounds for the same visual effect). This approach keeps shadow values in one place and makes theme switching trivial. You can also create component-level shadow tokens: --shadow-btn-hover, --shadow-heading-hero, --shadow-text-overlay. The relationship between text-shadow and font choice matters significantly. Thin, light-weight fonts produce delicate shadows that can look elegant. Bold, heavy fonts produce thick, prominent shadows that demand attention. Script and decorative fonts can produce cluttered shadows where the overlapping shadow layers of adjacent characters interfere with each other. Monospace fonts produce clean, even shadows because their consistent character width creates uniform shadow spacing. Test your shadow effect with your actual font at your actual size. An effect that looks great on a specimen word might look messy in a full sentence. Text-shadow on different background types requires different approaches. On solid backgrounds, you have full control and can use any shadow technique. On gradient backgrounds, ensure the shadow color works across the entire gradient range. On images, use shadows that create contrast regardless of what part of the image sits behind the text (the legibility shadow approach works best here). On transparent or semi-transparent backgrounds (glass effects), text-shadow is often essential for maintaining readability because the background color varies. For dark backgrounds, use brighter shadow colors or glow effects. For light backgrounds, use standard dark shadows. Text-shadow interacts with text-decoration in specific ways. Underlines, overlines, and line-throughs do not receive shadows. The shadow applies only to the glyph shapes themselves. If you need shadowed text with a shadowed underline, use a pseudo-element or border-bottom for the underline and apply its own box-shadow. Similarly, text-shadow does not affect the selection highlight color (::selection pseudo-element). The shadow remains visible behind selected text, which can create odd visual effects with certain color combinations. Text-shadow in responsive design should scale with font size. A 2px shadow that looks appropriate on a 48px heading becomes disproportionately large on a 24px heading on mobile. Use em units instead of px for shadow values to maintain proportional scaling: text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.3). This shadow scales with the font size, maintaining the same visual proportion regardless of the actual rendered size. For responsive utility classes, define shadow variants for different heading levels. CSS text-shadow compared to SVG text effects and canvas text rendering differs in capability and performance. SVG offers more sophisticated text effects through filters, masks, gradients, and patterns applied to text elements. Canvas provides pixel-level control over text rendering with shadowBlur, shadowColor, and shadowOffsetX/Y properties. CSS text-shadow is the simplest and most performant option for web text. Use CSS for standard shadow effects. Reach for SVG when you need effects beyond what CSS shadows offer. Canvas is appropriate for dynamic, data-driven text rendering like charts and visualizations. Combining text-shadow with other CSS text properties creates layered effects. Text-shadow plus background-clip: text (with -webkit-background-clip: text) plus a gradient background creates text with a gradient fill and a shadow. Text-shadow plus mix-blend-mode on a parent element creates blended shadow effects where the shadow interacts with the background based on the blend mode. Text-shadow plus filter: drop-shadow() on the parent creates a shadow of the shadowed text, doubling the depth effect. These combinations are powerful but require testing across browsers as support varies. Text-shadow in email clients has limited but useful support. Most modern email clients (Gmail, Apple Mail, Outlook on Mac, Yahoo Mail) support basic text-shadow. Outlook on Windows (which uses Word's rendering engine) does not support text-shadow. For email design, use text-shadow as a progressive enhancement: the email looks good without it and better with it. Keep effects simple (single layer, small offset, modest blur) because multi-layer shadows that look great on the web can render unpredictably in email clients. Print stylesheets should typically remove text-shadow. Shadows add visual weight on screen but can look muddy in print, especially on inkjet printers. Use @media print { * { text-shadow: none; } } to strip all text shadows in print output. If specific shadows serve a functional purpose in print (like ensuring text contrast on a colored background), preserve those selectively while removing decorative shadows. Browser rendering differences in text-shadow are minor but exist. Chromium-based browsers, Firefox, and Safari all support text-shadow with identical syntax but may render blur slightly differently. Firefox tends to produce tighter blur radii than Chrome for the same value. Safari may handle very large blur values differently at the extremes. These differences are rarely noticeable in practical use but can matter for pixel-perfect designs. If exact shadow appearance matters, test across all target browsers and adjust values per browser using CSS feature queries or user agent detection as a last resort. Text-shadow performance in CSS frameworks can be managed through utility classes. Tailwind CSS provides shadow utilities that work well for box-shadow but requires custom configuration for text-shadow. Add text-shadow utilities to your Tailwind config: extend the theme with textShadow values and create a plugin that generates corresponding utility classes. This gives you classes like text-shadow-sm, text-shadow-md, text-shadow-lg, and text-shadow-glow that maintain consistency across the project without repetitive inline styles. Generating text-shadow values programmatically is necessary for effects with many layers. A JavaScript function that generates a 3D extrusion effect: const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', '). For neon effects, a function can generate concentric glow layers with increasing blur: const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', '). Storing these generated values in CSS custom properties (--shadow-3d, --shadow-neon) keeps the CSS clean while the JavaScript handles the complex generation logic. Text-shadow with variable fonts creates interesting possibilities. As variable fonts allow smooth weight transitions, combining an animated font-weight with a correspondingly animated text-shadow creates text that appears to grow heavier and cast a deeper shadow simultaneously. Set both properties in a CSS transition or animation: transitioning font-weight from 400 to 700 while transitioning text-shadow from 1px 1px 2px rgba(0,0,0,0.2) to 2px 2px 6px rgba(0,0,0,0.4) produces a cohesive weight-and-depth animation. Accessibility considerations for text-shadow are straightforward: shadows must not reduce text readability. A common mistake is using a text color that relies on its shadow for contrast. If the shadow fails to render (older email clients, some accessibility tools, print stylesheets), the text must still be readable against its background on its own merit. Use text-shadow to enhance readability, not to create it. The base text color should pass WCAG contrast requirements against the background independently of any shadow. High-contrast mode in Windows strips text-shadow entirely, so your design must work without it. The text-shadow generator tool lets you add, remove, and configure multiple shadow layers visually, adjusting offset, blur, and color for each layer while seeing the result in real time. This visual approach is faster than manually coding multi-layer shadows, particularly for complex effects like neon glows or 3D extrusions where the interaction between layers determines the final appearance. Copy the generated CSS into your stylesheet and adjust as needed for your specific context.
Frequently asked questions
Can I add multiple text shadows?
Yes, you can add unlimited shadow layers. Each layer can have its own offset, blur radius, and color.
How does text-shadow affect performance?
Text shadows are GPU-accelerated in modern browsers and have minimal performance impact for typical use.
