CSS Box Shadow Generator

Name: Quartalis
Address: GB
Price range: ££

Build layered box shadows visually. Adjust, preview, copy. Nothing leaves your browser.

Preview

Shadow Layers

Inset Shadow

Horizontal Offset 4px

Vertical Offset 4px

Blur Radius 16px

Spread Radius 0px

Opacity 35%

CSS Output

box-shadow: 4px 4px 16px 0px rgba(49, 231, 224, 0.35);

About This Tool

This CSS box shadow generator runs entirely in your browser. Build single or multi-layered shadows with precise control over offset, blur, spread, colour, and opacity. Toggle inset shadows per layer.

Features: unlimited shadow layers with independent controls, horizontal and vertical offset (-100px to 100px), blur radius up to 200px, spread radius, per-layer colour with hex input and opacity slider, inset toggle, live preview on a dark card, and one-click CSS copy to clipboard.

Want a complete design system?

Browse our Tailwind themes, component kits, and starter templates in the store.

Browse Store →