CSS Text Shadow Generator
Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class. How it works
Use the CSS Text Shadow Generator
Shadow Layers (1/5)
Hello World
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Live Code Playground
<p style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-size: 48px; font-weight: bold; font-family: Arial, sans-serif;">Hello World</p>
Keyboard Shortcuts
About the CSS Text Shadow Generator
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); is the first shadow this CSS text shadow generator writes: 2 px right, 2 px down, a 4 px blur and black at 50% opacity. Add up to 5 layers, set each offset (-50 to 50 px), blur (0 to 100 px), color and opacity, check them on a light or dark page, and copy the CSS, a CSS variable or a Tailwind class.
The six presets
| Preset | Layers | Largest blur | Font and weight |
|---|---|---|---|
| Neon Glow | 3 | 60 px | Arial, bold |
| Hard Outline | 4 | 0 px | Arial, bold |
| Soft Emboss | 2 | 2 px | Georgia, normal |
| Deep 3D | 4 | 0 px | Verdana, bold |
| Double Lift | 2 | 16 px | Tahoma, bold |
| Color Glow | 3 | 45 px | Impact, bold |
Loading a preset replaces the layers and the text style.
How to use this tool
- Edit layer 1, or load a preset.
- Add layers (up to 5), move them up or down, or remove them. Each has an x and y offset, a blur, a color and an opacity.
- Change the sample text, size (12 to 120 px), weight and font stack, and switch the preview between a light and a dark page. These style the preview and the HTML snippet only; the CSS, variable and Tailwind copies hold just the shadow.
- Pick CSS, CSS variable or Tailwind and copy, or copy the HTML snippet.
Frequently asked questions
- How do I add a text shadow in CSS?
- Write text-shadow: offset-x offset-y blur color;, for example text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);. The two offsets are required, the blur is optional and defaults to 0, and a negative blur is not allowed (MDN).
- How do I make a neon glow with text-shadow?
- The Neon Glow preset stacks three layers with no offset and growing blur: 0px 0px 20px rgba(0, 255, 255, 1), 0px 0px 40px rgba(0, 255, 255, 0.5) and 0px 0px 60px rgba(255, 0, 255, 0.3), in cyan and then magenta. It also switches the preview to 48 px bold Arial, which only the HTML snippet carries over. A glow reads best on a dark page.
- How do I outline text with text-shadow?
- The Hard Outline preset uses four layers with no blur at plus or minus 2 px in both directions: 2px 2px 0px, -2px -2px 0px, 2px -2px 0px and -2px 2px 0px, all rgba(0, 0, 0, 1). It is an approximation of an outline built from shadows.
- In what order are multiple text shadows drawn?
- The first shadow in the list is on top and the last is at the bottom (MDN). Layer 1 here is the first one written, and the up and down buttons reorder the list.
- How do I use text-shadow in Tailwind?
- Choose Tailwind. The first shadow gives text-shadow-[2px_2px_4px_rgba(0,_0,_0,_0.5)], and Tailwind’s docs list the text-shadow-[...] form with underscores for spaces. The text-shadow utilities arrived in Tailwind CSS v4.1, released on April 3, 2025, so an older project needs an upgrade or a plain CSS rule.
- Does the tool check text contrast?
- No. It does not measure contrast between the text, its shadow and your background, so check readability on your own colors.
Related Tools
View all toolsCSS Box Shadow Generator
Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.
CSS Gradient Generator
Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.
CSS Border Radius Generator
Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.
CSS Transform Generator
Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.
CSS Filter Generator
Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.
CSS Flexbox Generator
Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.