CSS Text Shadow Generator
Generate text-shadow values visually. Set offset, blur, and color for each shadow; add multiple shadows and copy the CSS instantly.
Preview
Shadows
CSS
text-shadow: 0px 2px 4px #00000040; Presets
Table of Contents
What is text-shadow?
text-shadow is a CSS property that draws one or more shadows behind text. You set the horizontal and vertical offset, blur radius, and color. Unlike box-shadow, text-shadow has no spread or inset — just offset, blur, and color. Multiple shadows are comma-separated and stack in order.
Syntax
text-shadow: offset-x offset-y blur-radius color; Multiple shadows: text-shadow: shadow1, shadow2, ...; Offsets and blur are in px (or other length units). Color can be hex, rgb, or rgba; use transparency for softer shadows.
Use Cases
- Headings and titles — Soft shadow for depth or readability on busy backgrounds.
- Outline effect — Small offset with no blur (or multiple shadows) to suggest an outline.
- Glow — Zero offset with large blur and semi-transparent color.
- Layered depth — Multiple shadows for a more realistic drop shadow.
Frequently Asked Questions
text-shadow applies only to text and has no spread or inset — only offset-x, offset-y, blur, and color. box-shadow applies to the element’s box and supports spread and inset. Use text-shadow for typography effects and box-shadow for containers and cards.
Yes. Add more shadows with “Add shadow.” They stack in order; the first is on top. Use multiple shadows for layered depth or to combine outline and glow.