Box Shadow Generator
Build a CSS box-shadow visually — with offset, blur, spread, colour, opacity and inset, in up to five layers — and copy the code.
Result
Adjust the shadow to see it and copy the CSS.
How to use this tool
- Start from a preset or edit the layers. Each layer has X and Y offsets, blur, spread, colour, opacity and an inset option.
- Change the box and background colours and corner radius to match your design.
- Copy the CSS from under the preview.
How it works
Each layer becomes [inset] x y blur spread rgba(r, g, b, opacity) and the layers are separated by commas, with the first layer drawn on top. Positive X moves the shadow right and positive Y moves it down; spread grows (or, if negative, shrinks) the shadow before blurring.
Example
A soft card shadow
Two layers give 0 4px 12px 0 rgba(15, 23, 42, 0.25), inset 0 1px 2px -1px rgba(0, 0, 0, 0.1).
Privacy and limitations
- Everything runs in your browser; nothing you enter is uploaded or stored.
- Large blurred shadows on many elements can slow scrolling on low-end phones.
Frequently asked questions
Why use more than one layer?
Real shadows are sharper near the object and softer further away. Combining a small, tight layer with a large, faint one looks more natural.
What does inset do?
It draws the shadow inside the box, as if the box were pressed in.