Text Shadow Generator
Build a CSS text-shadow and see it on light and dark at once. Copy the declaration when it looks right.
Was this useful?
What this tool does
Move the shadow, blur it, tint it, and read the CSS as you go. The preview shows the same letters on a light backdrop and a dark one side by side, because a shadow tuned on white very often disappears completely on dark, and seeing only one of the two is exactly how that ships. The ranges here are deliberately tighter than the ones for box shadows: a text shadow is judged against letterforms, where a few pixels too many stops reading as depth and starts reading as a second blurry word. When it looks right, copy the declaration and paste it in.
What you can use it for
- Lift a heading off a photo or a busy background so it stays readable.
- Add a subtle depth to a hero title without reaching for an image.
- Build a hard offset shadow for a retro or poster look.
- Check that a shadow still works when your site switches to dark mode.
How to use it
- Set the horizontal and vertical offset to place the shadow.
- Add blur for a soft shadow, or leave it at zero for a hard edge.
- Pick the color and dial the opacity down until it looks natural.
- Check both backdrops in the preview, then copy the CSS.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Related tools
DesignCSS Box Shadow Generator
Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
CSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
Color Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Frequently asked questions
Why is there no spread option?
Because CSS text-shadow does not have one. It takes a horizontal offset, a vertical offset, a blur and a color, and that is all. Box shadows have spread and an inset option; text shadows have neither, which is why the two are separate tools here rather than one tool with controls that do nothing half the time.
Why does the preview show two backgrounds?
Because a shadow is only ever readable relative to what is behind it. A soft black shadow that adds a nice lift on white is invisible on a dark background, and a light shadow does the reverse. Seeing both at once means you notice before your users do.
Can I use a negative offset?
Yes. Negative values move the shadow left and up instead of right and down, which is what you want for a light source coming from below or from the side.
How do I get a subtle shadow rather than a heavy one?
Keep the offsets small, add a little blur, and bring the opacity well down, somewhere around a quarter to a third. Most heavy-looking text shadows are simply a fully opaque color that needed to be softer.