Free Shadow Generator | Multi-layer Box Shadow Builder

Adjust color, offset, blur, spread, and opacity to build soft multi-layer box-shadow code in real time.

Live preview

ShadowCard depth

Preview multi-layer depth and softness in real time.

Box shadow code

box-shadow:
  0px 12px 18px 1px rgba(15, 23, 42, 0.171),
  0px 15px 25px -1px rgba(15, 23, 42, 0.142),
  0px 21px 31px -3px rgba(15, 23, 42, 0.113),
  0px 29px 38px -5px rgba(15, 23, 42, 0.084);

Tailwind class

shadow-[0px_12px_18px_1px_rgba(15,_23,_42,_0.171),_0px_15px_25px_-1px_rgba(15,_23,_42,_0.142),_0px_21px_31px_-3px_rgba(15,_23,_42,_0.113),_0px_29px_38px_-5px_rgba(15,_23,_42,_0.084)]

How to use

Select files

Choose a shadow color and layer count.

Adjust settings

Adjust offsets, blur, spread, and opacity.

Review and download result

Review the preview and copy the box-shadow code.

Real-world scenarios

Useful for tuning depth on cards, popovers, modal surfaces, and floating panels.

Tune softer shadow values for reusable card components.

Keep floating surfaces like modals and dropdowns visually consistent.

Bridge the gap between design exploration and production CSS.

Recommended tools

Recommended tools that help you finish the workflow faster.

View all

Grid Generator

Visually design custom CSS Grid and Flexbox layout code.

Gradient Generator

Generate CSS gradients by setting colors and angle.

Color Picker

Pick a color and instantly convert HEX, RGB, and HSL values.