YourFileKit
Esc
Home/Tools/Text Shadow Generator

Build a CSS text-shadow visually

Build a CSS text-shadow, with support for multiple layered shadows, live preview, and copyable CSS.

Everything runs in your browser. Nothing is uploaded to our servers.
Fullscreen
Sample text
Shadow layers
Blur4px
Offset X2px
Offset Y2px
Sample Text
01
Type your own sample text

Preview the shadow against whatever text you're actually styling.

02
Add and tune shadow layers

Each layer has its own offset, blur, and color. Stack a few for a richer effect, like a glow plus a drop shadow.

03
Copy the CSS

Layers are comma-joined into a single text-shadow declaration, in the order you added them.

Frequently asked

Can text-shadow have more than one shadow?

Yes. Like box-shadow, text-shadow accepts a comma-separated list of shadows, all rendered together. A common combo is a tight dark shadow for depth plus a soft, wider one for a glow.

What does the blur value actually do?

It controls how soft the shadow's edges are. 0 gives a crisp, hard-edged shadow; higher values spread and fade it, useful for glow effects.

Does layer order matter?

Yes, later layers render on top of earlier ones. If two shadows overlap heavily, the one listed last will visually sit above the one listed first.

Related tools