CSS Text Shadow Generator
Use our CSS text shadow generator to set color, blur, and offsets with a live preview. Copy the final CSS when it looks right. No installs needed.
CSS Text Shadow Generator
0
0
0
Preview
CSS Code
What this does
So you want a shadow on some text, for a bit of depth, a glow, or just to keep it readable over a busy background, and you want to see it as you set it. This builds the CSS. Set the colour, offsets, and blur, watch the preview word, and copy the text-shadow code.
How to use it
- Pick a shadow colour.
- Set the horizontal and vertical offsets to position the shadow, and the blur to soften it.
- Copy the generated CSS with the Copy button.
How it works
As you adjust the controls, the tool builds a text-shadow value and applies it to the preview text right away, so the effect on screen matches the code exactly. It is all done in the browser with no library, and updates the instant you move a slider.
Understanding text-shadow
A text-shadow takes three pieces and a colour: a horizontal offset, a vertical offset, a blur radius, and the shadow colour. The offsets decide where the shadow sits relative to the text, and the blur controls how sharp or soft it is, from a crisp hard shadow at zero up to a soft haze at higher values.
If you have used the box shadow generator, one difference is worth noting: text shadows have no spread value and no inset option, so they are a little simpler. They are good for lifting text off a background, adding a subtle glow with a light colour, or improving legibility when text sits over an image. You can even layer several shadows by separating them with commas, though this tool builds a single one.
Unlike some other effects, text-shadow never needed vendor prefixes, so the output is a single clean line ready to drop into your CSS.
Questions people ask
What do the values mean?
In order: the horizontal offset, the vertical offset, and the blur, followed by the colour. The offsets place the shadow and the blur softens it.
How is this different from a box shadow?
A text shadow applies to the letters themselves and has no spread or inset option, so it is simpler. A box shadow applies to the element's box and offers those extra controls.
How do I make text more readable over an image?
Use a dark shadow with a small offset and a little blur behind light text, or the reverse for dark text. The shadow adds contrast against the busy background.
Does the output need prefixes?
No. text-shadow is supported plainly by all modern browsers, so the single line is all you need.
References
- MDN Web Docs. text-shadow. https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- World Wide Web Consortium. CSS Text Decoration Module Level 3. https://www.w3.org/TR/css-text-decor-3/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.