Text Shadow Generator
Stack up to three shadow layers on real text, tune offset, blur and color, and copy the result as a Tailwind class or plain CSS.
Shadow text
text-shadow-[0px_4px_8px_rgba(0,0,0,0.25)]
@theme {
--text-shadow-custom: 0px 4px 8px rgba(0, 0, 0, 0.25);
}text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
Frequently asked questions
Does Tailwind CSS have text shadow utilities?
Yes, from Tailwind v4.1. You get text-shadow-xs through text-shadow-lg, and arbitrary values like text-shadow-[0_2px_4px_rgba(0,0,0,0.25)]. On earlier versions use an arbitrary property such as [text-shadow:0_2px_4px_rgba(0,0,0,0.25)].
How do I make glowing text?
Use a shadow with zero offset, a bright color and a larger blur, and stack two layers for a stronger glow. The Glow preset shows a cyan example on a dark background.
How do I add an outline to text with CSS?
Use hard shadows with no blur in several directions, for example 1px 1px 0 and -1px -1px 0 in the outline color. The Outline preset does this. For thick outlines, -webkit-text-stroke gives a cleaner result.
Will text shadows hurt readability?
A soft, low-opacity shadow can help text stand out on busy images, but a heavy one blurs the letters. Check the final contrast with the contrast checker.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.