Omnibus
Layer 1
Color
CSS
box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.25);

CSS box-shadow generator

Dial in the horizontal and vertical offset, blur, spread, color and opacity, and stack several shadow layers for depth. Toggle inset for inner shadows. The preview and CSS update as you go.

It all runs client-side — nothing is uploaded — so you can design a shadow and copy the box-shadow value straight into your stylesheet.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Border Radius Generator

Round each corner independently in px, % or em.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

CSS Box Shadow Generator — frequently asked questions

How do I add multiple box-shadows?
CSS lets you comma-separate several shadows on one element. Add a layer for each shadow here and they're combined into a single box-shadow value in the order you stack them.
What does the spread value do?
Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so a positive spread makes the shadow larger than the element and a negative spread pulls it in — useful for tight, offset shadows.
Is anything uploaded?
No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.