About the CSS Text Shadow Generator
What is a text-shadow generator?
The text-shadow property takes three lengths and a color, with nothing to tell you which is which. A generator puts a slider on each one and shows the result on real text, so you can see the difference between a shadow that lifts a heading off the page and one that just makes it look blurry.
What makes this property more interesting than box-shadow is that stacking changes what it does entirely. One shadow is a shadow. Four identical ones stepped a pixel apart become a 3D extrusion. Four at the diagonals become an outline. Three at the same spot with rising blur become a neon glow. Those effects are the reason most people look for this tool, so it stacks up to eight layers and ships a preset for each of them.
How to Use This Tool
- Pick a preset. Soft and Hard are ordinary shadows. Neon glow, Retro 3D, Embossed and Outlined are the stacked tricks.
- Adjust the layer. Across and Down move the shadow, Blur softens it, Opacity sets how heavy it lands.
- Stack more. Add another layer to build glows and extrusions. The first layer paints on top.
- Set the scene. Change the sample text, size, weight and both colors so you are judging the effect at the size you will ship.
- Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
Common Use Cases
Text shadows earn their place in a few specific spots, and get in the way everywhere else.
- Text over photos: A soft dark shadow keeps a headline readable when the image behind it changes brightness.
- Neon and glow effects: Three stacked layers at rising blur in the same hue, on a dark background.
- Retro and arcade headings: Stepped hard shadows give a chunky 3D look without an image.
- Faking an outline: Four hard shadows at the diagonals outline text everywhere, including browsers where
-webkit-text-stroke is awkward.
- Embossed labels: A light shadow up and left plus a dark one down and right presses text into its background.
Shadowing a box instead? The CSS Box Shadow Generator stacks layers the same way. For colored headings there's the CSS Gradient Text Generator. Or browse all our free developer tools.
Frequently Asked Questions
What do the values in text-shadow mean?
Across, down, blur, color, in that order. The first two can be negative to move the shadow left or up. Blur is optional and defaults to zero, which gives a hard edge. Unlike box-shadow there is no spread value, so a text shadow can only be offset and softened, never grown.
How do I outline text with a shadow?
Stack four shadows with zero blur, one pixel out in each diagonal direction, all in the outline color. It's a fake, but it works everywhere and it follows the letterforms exactly. The property that's actually meant for this is -webkit-text-stroke, which is widely supported but draws the stroke centered on the glyph edge, so it eats into thin fonts in a way the shadow trick does not.
How do I make a neon glow?
Use the Neon glow preset, or build it yourself with three or four layers at zero offset, same hue, with the blur roughly doubling each time, on a dark background. The trick is that the layers add up where they overlap, so the center burns brighter than the edges, which is what makes it read as light rather than a colored blur.
Will a text shadow hurt readability?
It can, especially on body text, so it's worth being careful. A shadow adds a second edge to every letter, and at small sizes those edges close up the counters inside letters like e and a. Keep shadows for display sizes and keep the blur small relative to the font size. If the shadow only exists to make text readable over an image, a semi-transparent panel behind the text is cheaper to paint and easier to read.
Does it cost anything in performance?
A static shadow is close to free. An animated one isn't, because every layer is repainted on every frame and text repaints are expensive. If you want a glow that pulses, animate opacity on a duplicate of the text sitting behind the real one rather than animating the shadow itself.
Can I use this in Tailwind or React?
Yes, switch the format above the code. Tailwind gets an arbitrary-value class, since its built-in text shadow utilities do not cover stacked layers. The JS object drops straight into React inline styles or styled-components.
