How to use the css text shadow generator
- Set the horizontal and vertical offset in pixels. Positive values move the shadow right and down.
- Set the blur radius, choose a color and set its opacity.
- Optionally tick Add a second shadow for a glow or an outline effect.
- Change the preview text and colors to match your design, then copy the text-shadow rule.
A simple dark shadow
Offsets of 2 px and 2 px, a blur of 4 px and black at full opacity produce text-shadow: 2px 2px 4px #000;. The color is shortened to #000 because each pair of hex digits repeats.
With the second shadow on, a white shadow at -2 px and -2 px with a 4 px blur is added after a comma, giving two layers: a dark one down and right, and a light one up and left.
How the value is written
The syntax is text-shadow: x y blur color. A zero value is written as plain 0, with no unit. When the opacity is below 100%, the color is written as rgba() with the opacity as the last number, rounded to two decimals, and at full opacity it is written as a hex color. Several shadows are joined with commas, and the first one is painted on top.
The blur radius cannot be negative. An offset of 0 with a blur gives an even glow around the letters. A blur of 0 gives a hard shadow with a sharp edge.
Readability
Shadows can make text look richer, but they can also reduce legibility. A soft shadow in a color close to the background makes letters look fuzzy, and a heavy glow can swallow thin fonts. Check the contrast between the text and the background with the color contrast checker, and keep body text free of effects. For boxes and cards see the box shadow generator, and to animate text see the CSS animation generator.
The preview is rendered by your browser using the same rule. The tool runs in your browser and nothing is uploaded.
Assumptions and limits
- Offsets can be from -200 to 200 px and blur from 0 to 200 px.
- Opacity is a percent from 0 to 100 and is applied to the shadow color only.
- The preview text, text color and background color are for display and are not part of the CSS output.
- The look can vary slightly between browsers and fonts.
Frequently asked questions
How do I add a glow with text-shadow?
Use offsets of 0 and a blur radius such as 8 px with a bright color. For a stronger glow add a second shadow with a larger blur.
Can text-shadow have more than one shadow?
Yes. Separate them with commas. The first shadow in the list is painted on top of the later ones.
Why does my shadow value use rgba()?
A hex color cannot hold a partial opacity here, so when the opacity is under 100% the color is written as rgba with the opacity as its last number.
Does text-shadow affect layout?
No. A shadow does not change the size or position of the text box. It can overlap nearby content, so leave room around the text.