CSS Box Shadow Generator Online Free — Copy CSS

chain

Box Shadow Generator — offset · blur · spread · inset runs in your browser · nothing uploaded

inset

Colour

↑↓ nudge focused slider by 1 (⇧ ±10)

approximation — SVG filters have no spread; blur is halved to approximate stdDeviation

Generated client-side · nothing uploaded

Box Shadow Generator Online

Updated 2026-08-19

Generate CSS box-shadow online for free. Drag sliders for offset, blur, spread, colour, and opacity, toggle inset for an inner shadow, and watch a live preview — then copy the ready-to-use box-shadow declaration. Everything runs in your browser, so nothing you design is uploaded.

Getting a shadow right by editing numbers and reloading is slow, and the interaction between spread and blur is hard to picture. This generator shows the result instantly on a sample element and emits clean box-shadow CSS with an rgba() colour, so your shadows look soft and natural and drop straight into any card, button, or modal.

// how to use

1 Drag the offset, blur, and spread sliders to shape the shadow.
2 Pick a colour and opacity, and toggle inset for an inner shadow.
3 Watch the live preview, then click Copy CSS to grab the box-shadow declaration.

// examples

Soft drop shadow

Input

x 6, y 12, blur 24, spread 0, black 25%

Output

box-shadow: 6px 12px 24px 0px rgba(0, 0, 0, 0.25);

Inset shadow

Input

inset, x 0, y 2, blur 6, spread 0, black 30%

Output

box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.3);

// common uses

Adding depth to cards, buttons, and modals Designing pressed or recessed inset effects Matching a shadow to a design spec Learning how box-shadow parameters interact

// faq

Is anything uploaded to a server?

No. The shadow is rendered live in your browser and the CSS is generated on the fly, so nothing you design leaves your machine.

What do offset, blur, and spread do?

Offset X and Y move the shadow horizontally and vertically, blur softens its edge, and spread grows or shrinks the shadow before the blur is applied. Together they define the whole box-shadow.

What is an inset shadow?

An inset shadow is drawn inside the element rather than behind it, which creates a pressed or recessed look. Toggle inset to switch between an outer and inner shadow.

How is the colour opacity handled?

The picked colour is combined with the opacity slider and output as an rgba() value, so you get soft, semi-transparent shadows that blend naturally with any background.

Can I stack multiple shadows?

This tool generates one shadow at a time. To layer several, generate each and join them with commas in a single box-shadow property — CSS applies them from first to last.

// works with your data

CSS Formatter CSS Minifier Sort & Dedupe Lines Slug Generator Reverse Text Text Repeater