CSS Box Shadow Generator — Visual Shadow Maker (Free)

Preview

Preview background

Your CSS 1 shadow

About the CSS Box Shadow Generator

Shadows are one of the quickest ways to make a design feel polished — they add depth, separate cards from the page, and draw the eye to buttons and pop-ups. Getting the numbers right by hand can be fiddly, though. This visual builder lets you drag a few sliders, watch the preview update instantly, and copy a clean line of CSS you can paste anywhere. Stack multiple shadows for layered, realistic depth, or flip to an inner shadow for pressed-in fields and toggles.

For a natural lift, use a small downward offset, a generous blur, and a dark colour at low opacity.

Layer a tight, subtle shadow over a wide, soft one to mimic how real objects cast light.

A slightly negative spread keeps soft shadows tucked neatly under a card.

Turn on the inner shadow for input fields, switches, and anything that should look recessed.

How it works

Three steps. No sign-up, no upload, no wait.

Adjust the sliders

Set the horizontal and vertical distance, softness, and size until the preview looks right.

Pick a colour

Choose the shadow colour and how see-through it is — or stack a few layers for extra depth.

Copy the code

Grab the ready-made line of CSS and paste it straight into your stylesheet.

🔒

Private by design.Everything happens right here in your browser. Your files are never uploaded — we never see them.

Frequently Asked Questions

What is a box shadow? ▼

A box shadow is a soft (or sharp) shade drawn around an element on a web page, giving it a sense of depth so it appears to lift off the background. In CSS it's written as box-shadow: 0 4px 12px rgba(0,0,0,0.15); — the numbers set the position and softness, and the colour sets the tint.

Can I add more than one shadow to the same element? ▼

Yes. You can stack as many shadows as you like by separating them with commas — for example a tight dark shadow for a crisp edge plus a wide soft one for a gentle glow. This tool lets you add, remove, and reorder layers, then combines them into a single line of CSS for you.

What's the difference between an inner and outer shadow? ▼

An outer shadow sits outside the element and makes it look raised, like a card floating above the page. An inner shadow (the inset option) is drawn inside the element instead, making it look pressed in or recessed — handy for input fields and toggled buttons.

What does the spread setting do? ▼

Spread grows or shrinks the shadow before it's blurred. A positive value makes the shadow bigger than the element in every direction; a negative value pulls it in, which is a neat trick for keeping a soft shadow tucked under a card so it doesn't leak out the sides.

Why does my shadow look too harsh or too faint? ▼

It usually comes down to blur and opacity. For a natural look, use a fairly large blur with a low, semi-transparent colour (dark grey at 10–20% works well) and a small downward offset. Very solid or very sharp shadows tend to look heavy, while too much blur can make them disappear.

Does this send my design anywhere? ▼

No. Everything is generated right in your browser as you drag the sliders — nothing is uploaded and no design data ever leaves your device.