CSS Shadow Generator

About CSS shadow generator

One page covers both box-shadow and text-shadow, with a tab for each. Stack up to four layers, tune offset, blur, spread, color and opacity, and copy a declaration that already uses rgba values. It is for developers who want soft, realistic depth without guessing at pixel values.

How to use it

1. Stay on the Box Shadow tab or switch to Text Shadow.
2. For box shadows, click a preset such as Subtle, Medium, Large, Card, Glow or Inner to load a starting stack.
3. Under Shadow layers, move the X Offset, Y Offset, Blur Radius and Spread Radius sliders, then set Color and Opacity. Flip the Inset switch to draw the shadow inside the box.
4. Click Add layer to build a stack of up to four. Later layers are drawn beneath earlier ones.
5. Press Copy CSS under Generated CSS to take the declaration.

The Card preset

Box Shadow tab, preset Card

box-shadow: 
  0px 1px 3px 0px rgba(0,0,0,0.08),
  0px 4px 8px 0px rgba(0,0,0,0.12);

When to use it

• Giving a card component a tight contact shadow plus a wider ambient shadow so it feels lifted.
• Adding an inset shadow to a text field so it reads as recessed.
• Creating a colored glow around a call-to-action button using the Glow preset.
• Softening headline text against a photo using a single text-shadow layer.

Questions about CSS shadow generator

Why is there no Spread slider on the Text Shadow tab?

The CSS text-shadow property has no spread value, only offsets, blur and color. The tab therefore offers X, Y, Blur, Color and Opacity per layer.

What are the slider limits?

Box layers allow offsets and spread from -50 to 50 pixels and blur from 0 to 100. Text layers allow offsets from -30 to 30 and blur from 0 to 50.

Does opacity change the color or add a separate property?

It is folded into the color. A black shadow at 12 percent opacity is written as rgba(0,0,0,0.12), so the output has no extra opacity property.

Why is my first shadow layer on top?

CSS paints the first shadow in the list closest to the element. Layer 1 in the editor is that first entry, which is why a tight dark layer normally goes first.

Can I delete the only layer?

No, the remove button is disabled when one layer is left. Set its opacity to 0 if you want an invisible shadow in the meantime.

Related tools

• Text shadow generatorLayer multiple text-shadows with color, offset, and blur controls — includes glow, retro, and fire presets
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color
• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element