CSS Box Shadow Generator

Design box-shadow CSS with live preview. Offset, blur, spread, inset.

Offset X: 0px

Offset Y: 4px

Blur: 12px

Spread: 0px

Opacity: 10%

Inset

Preview

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

Looking for gradients or glassmorphism? Try our dedicated tools: CSS Gradient Generator · Glassmorphism Builder

How it works

Adjust the offset, blur, spread, color and opacity sliders.
Watch the live preview update as you tune each value.
Toggle inset for inner shadows.
Copy the generated box-shadow CSS.

What people use it for

Dialing in a box-shadow without guessing values.
Matching a design mockup's elevation/depth exactly.
Building soft, layered shadows for cards and buttons.

Good to know

It generates box-shadow only: for gradients or glassmorphism, use the dedicated CSS Gradient Generator and Glassmorphism Card Builder tools.
The preview shows one element, test in your actual layout for stacking and background interactions.

Frequently asked questions

Which effects can I generate?

Box-shadow (outer and inset) with a live preview so you tune by eye, not by trial and error. Gradients and glassmorphism have their own dedicated tools on Sticraft.

Can I make an inner shadow?

Yes, enable the inset option and the shadow renders inside the element instead of behind it.

Is anything uploaded?

No. CSS is generated live in your browser.

Related tools