CSS Text Shadow Generator
Drag the sliders, watch the live preview, and copy the text-shadow CSS.
Runs entirely in your browser. Nothing you create is uploaded.
How to use this tool
Type the words you want to test into the preview text field. Then move the sliders to set the horizontal and vertical offset and the blur radius, and pick a shadow color. Lower the opacity for a soft, subtle shadow, or set the offsets to zero and raise the blur to create a text glow. The preview updates live as you drag, and the text-shadow CSS string is built for you. When the look is right, press Copy CSS and paste it straight into your stylesheet. The Make a glow button is a quick shortcut that centers the shadow and pumps up the blur so the text appears to light up.
How a text shadow works
The CSS text-shadow property paints a colored copy of the text behind the visible characters. It takes the horizontal offset, the vertical offset, the blur radius, and a color, in that fixed order.
Offset X moves the shadow right when positive and left when negative. Offset Y moves it down when positive and up when negative. The blur radius softens the edge: zero gives a hard, sharp copy, while larger values fade the shadow out into a haze. The color usually carries an alpha value so the shadow blends with the background, which is why this builder exposes an opacity slider that is folded into an rgba color. To make a glow, set both offsets to zero so the shadow sits directly under the text and let a large blur radius spread evenly in every direction.
A real example
Say you want a clean, readable shadow for a heading on a light page. Set offset X to 2, offset Y to 2, blur to 4, shadow color to a dark slate like #1f2937, and opacity to 50 percent. The builder produces text-shadow: 2px 2px 4px rgba(31, 39, 50, 0.5);. That lifts the heading off the background just enough to add depth without hurting legibility. For a neon style text glow, set both offsets to 0, blur to 20, the shadow color to a bright cyan like #22d3ee, and opacity to 90 percent to get text-shadow: 0px 0px 20px rgba(34, 211, 238, 0.9);.
Common questions
How do I create a text glow instead of a drop shadow?
Set both the offset X and offset Y sliders to zero so the shadow sits directly behind the text, then raise the blur radius. With no offset the blurred color spreads evenly in every direction and looks like the text is lit up. The Make a glow button does this for you in one click.
Why does the color use rgba instead of plain hex?
The opacity slider needs an alpha channel, and rgba carries one cleanly. The builder reads your chosen hex color, converts it to red, green and blue values, and appends the opacity as the alpha. You can paste the result directly into CSS, and lowering opacity is what makes a shadow look soft instead of solid.
Can I stack more than one text shadow?
Yes. CSS lets you list several shadows separated by commas, which is how layered effects and outlines are built. This generator builds one shadow at a time, so create each layer, copy it, and join the values with commas in your stylesheet for richer depth.
What blur and offset values keep text readable?
For body and heading text, small offsets of one to three pixels with a blur of two to six pixels and an opacity around forty to sixty percent stay subtle and readable. Large offsets or heavy blur look dramatic but can blur the edges of the characters, so reserve those for display headings and decorative type.
Do these values work in every browser?
The text-shadow property is supported by every modern browser without a vendor prefix, so the code you copy here works in current versions of Chrome, Firefox, Safari and Edge.