The Text Shadow Generator lets you design CSS text shadows visually. Adjust the horizontal and vertical offset, blur, colour, and opacity, watch the shadow update live on your own preview text, and copy ready-to-use CSS — no need to remember the property syntax or guess at values.
You can layer several shadows on the same text to build glows, outlines, neon, and 3D or long-shadow effects, then copy the result as plain CSS or a Tailwind arbitrary-property class. Everything happens in your browser.
How to use the text shadow generator
- Set the X and Y offset and the blur radius for your shadow.
- Pick a colour and adjust the alpha (opacity) slider for how strong the shadow is.
- Add more shadows to build glow, outline, or 3D effects, and tweak the preview text, its colour, size, and background.
- Copy the generated CSS (or Tailwind class) and paste it into your stylesheet.
Understanding the text-shadow values
The CSS text-shadow property takes, in order: the horizontal offset (X), the vertical offset (Y), the blur radius, and the colour. Positive X moves the shadow to the right and positive Y moves it down; a larger blur softens the edge. Unlike box-shadow, text-shadow has no spread radius and no inset — it only draws behind the text.
Glows, outlines, and 3D text
Layering several shadows is how designers create richer effects. A single shadow with zero offset and a coloured blur makes a glow; four shadows offset by one pixel up, down, left, and right fake a solid outline; and a stack of shadows stepping diagonally with a shared colour builds a 3D or long-shadow look. This tool lets you add and remove layers so you can experiment quickly.
Keeping text readable
Text shadows are often used to keep captions legible over photos or gradients. A soft, semi-transparent dark shadow (for example a small offset with a few pixels of blur at around 40% opacity) adds just enough separation without making the text look heavy. Use the opacity slider and the preview background to check contrast before you ship it.
Frequently Asked Questions
What does each text-shadow value do?
The values are: X offset, Y offset, blur radius, and colour. X and Y move the shadow, blur softens it, and the colour (with opacity) sets its look. text-shadow has no spread or inset, unlike box-shadow.
How do I add more than one text shadow?
Click “Add shadow” to layer another shadow on the same text. In CSS, multiple text shadows are separated by commas, which this tool does for you automatically — handy for glows, outlines, and 3D effects.
How do I make glowing or neon text?
Set the X and Y offset to 0, choose a bright colour, and increase the blur. Add a second layer with a larger blur for a stronger glow. Raising the opacity makes the glow more intense.
Can I get the text shadow as a Tailwind class?
Yes. Switch the output to “Tailwind” to get an arbitrary-property class such as [text-shadow:…]. Tailwind has no built-in text-shadow utility, so it uses this arbitrary property, with underscores standing in for spaces.
Does text-shadow work in all browsers?
Yes. text-shadow is supported in all modern browsers, so the generated CSS works everywhere without vendor prefixes.