🔠 CSS Text Shadow Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
Drag the sliders or pick a color. Add layers to stack multiple shadows. The preview and CSS update live.
This CSS text shadow generator builds the text-shadow property visually so you do not have to guess the numbers. Drag the sliders for horizontal offset, vertical offset and blur, pick a shadow color and set its opacity, then watch the effect appear on the sample text in real time. You can stack several shadow layers for glow, outline or 3D effects, and the matching text-shadow CSS is generated below ready to copy into your stylesheet.
What is the CSS Text Shadow Generator?
The CSS text-shadow property adds one or more shadows to the text of an element. A single shadow takes up to four values in order: the horizontal offset, the vertical offset, an optional blur radius, and a color. For example, text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) pushes a soft grey shadow 2 pixels right and 2 pixels down with a 4 pixel blur. Positive horizontal values move the shadow right, negative move it left; positive vertical values move it down, negative move it up.
Unlike box-shadow, text-shadow has no spread value and no inset keyword. It only ever applies to the glyphs of the text, never to the element box. The blur radius cannot be negative: a value of 0 gives a hard, sharp copy of the text, and larger values spread the shadow into a soft haze. The color can be any CSS color, and using rgba (or hsla) lets you control opacity, which is what makes a shadow look subtle rather than heavy.
You can apply more than one shadow by separating each set of values with a comma. The browser paints them in the order listed, with the first shadow on top and later shadows stacked behind it. Layering is how you build richer effects: a tight dark shadow plus a wider soft one creates depth, two opposite offsets in a light color form an outline, and a blurred copy in a bright hue produces a neon glow. This tool lets you add and edit each layer separately, then writes the full comma separated text-shadow value for you.
When to use it
- Adding a subtle drop shadow to headings so they stand out against a busy background image.
- Creating a neon glow or outline effect for hero text, logos or call-to-action labels.
- Improving the legibility of light text placed over photos by giving it a soft dark shadow.
- Prototyping and tweaking a 3D or letterpress text effect without editing CSS by hand each time.
How to use the CSS Text Shadow Generator
- Type your own words into the sample text box and set the font size and text color to match your design.
- Drag the horizontal offset, vertical offset and blur sliders to shape the shadow.
- Pick a shadow color and adjust the opacity slider to make it as strong or faint as you like.
- Click "Add layer" to stack another shadow, then switch between layers using the layer tabs.
- Copy the generated text-shadow CSS and paste it into your stylesheet.
Formula & method
Worked examples
A simple readable drop shadow for white heading text over a photo.
- Set horizontal offset = 2px and vertical offset = 2px so the shadow falls to the lower right.
- Set blur radius = 4px for a soft edge.
- Pick a near-black shadow color (#1e293b) and set opacity to 50 percent, giving rgba(30, 41, 59, 0.5).
- The generator outputs the single-shadow value.
Result: text-shadow: 2px 2px 4px rgba(30, 41, 59, 0.5);
A neon glow using two stacked shadows on bright text.
- Layer 1: offset 0px, 0px, blur 4px, color white at full opacity for a tight inner halo.
- Click "Add layer" to create Layer 2.
- Layer 2: offset 0px, 0px, blur 12px, a vivid blue (#3b82f6) at full opacity for the outer glow.
- The tool joins both layers with a comma, painting Layer 1 in front of Layer 2.
Result: text-shadow: 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 12px rgba(59, 130, 246, 1);
The four values of a single text-shadow
| Value | Meaning | Notes |
|---|---|---|
| offset-x | Horizontal distance of the shadow | Positive = right, negative = left. Required. |
| offset-y | Vertical distance of the shadow | Positive = down, negative = up. Required. |
| blur-radius | How soft the shadow is | Optional, defaults to 0. Cannot be negative. |
| color | Color of the shadow | Optional. Use rgba or hsla to control opacity. |
Common text-shadow effect recipes
| Effect | Example value |
|---|---|
| Subtle drop shadow | 1px 1px 2px rgba(0, 0, 0, 0.4) |
| Hard offset (retro) | 3px 3px 0px #000 |
| Soft glow | 0 0 8px rgba(59, 130, 246, 0.8) |
| Outline (4 shadows) | -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 |
| Letterpress | 0 1px 1px rgba(255, 255, 255, 0.6) |
Common mistakes to avoid
- Expecting a spread or inset value. text-shadow only accepts offset-x, offset-y, blur and color. There is no spread radius and no inset keyword like box-shadow has. If you need those, you are thinking of box-shadow, which applies to the element box rather than the text.
- Using a negative blur radius. The blur radius must be zero or positive. A negative value makes the whole declaration invalid and the shadow is dropped, so use 0 for a hard, sharp shadow instead.
- Getting the stacking order backwards. When you list multiple shadows, the first one is painted in front and later ones behind it. If a wide glow is hiding a tight shadow, swap their order so the smaller, sharper shadow comes first.
- Making shadows too heavy to read. A large offset or a fully opaque dark color can blur the text edges and hurt legibility. For body and heading text, keep offsets small and lower the opacity so the shadow supports the text rather than competing with it.
Glossary
- text-shadow
- The CSS property that adds one or more shadows to the text characters of an element.
- Offset
- How far the shadow is shifted from the text horizontally (offset-x) and vertically (offset-y), measured in pixels here.
- Blur radius
- How far the shadow color spreads and softens. 0 is a sharp copy; larger values give a hazier shadow.
- rgba
- A CSS color notation giving red, green, blue and an alpha (opacity) channel from 0 to 1, used to make shadows translucent.
- Layer
- One set of shadow values. Multiple layers are comma separated and stacked to build richer effects.
Frequently asked questions
What is the CSS text-shadow property?
text-shadow adds a shadow to the text of an element. It takes a horizontal offset, a vertical offset, an optional blur radius and a color, for example text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5). Unlike box-shadow it affects only the glyphs, not the element box.
How do I add multiple text shadows?
Separate each shadow with a comma in the same text-shadow declaration, like text-shadow: 0 0 4px #fff, 0 0 12px #3b82f6. The browser paints the first shadow on top and the rest behind it. In this tool you click "Add layer" and edit each one separately.
Can text-shadow have a blur but no offset?
Yes. Set both offsets to 0 and give a blur radius, for example text-shadow: 0 0 10px #00f. This creates an even glow around the text in every direction, which is the basis of neon and halo effects.
Why is there no spread or inset for text-shadow?
The text-shadow specification simply does not define a spread radius or an inset keyword; those belong to box-shadow. text-shadow always draws an outer shadow of the text glyphs using only offset, blur and color.
How do I make an outline around text with text-shadow?
Stack four hard shadows (blur 0) offset in each diagonal direction in the outline color, for example -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000. For crisper results the dedicated -webkit-text-stroke property is also an option.
Is text-shadow supported in all browsers?
Yes. text-shadow is part of CSS3 and is supported by all modern browsers including Chrome, Firefox, Safari and Edge, with no vendor prefix needed. The CSS this tool generates works in any current browser.