CSS Box-Shadow Generator

Build a box-shadow value with a live preview. Stack up to four layers, tweak each one with sliders, grab a copy-ready snippet. Soft / Material / Neumorphic / Glow presets to start from. Everything stays in your browser.

Preset

Soft Medium Hard Material 1 Neumorphic Glow Inset Pressed

Canvas Box fill Radius px Size 200 px

Layers (rendered back-to-front) + Add layer

No layers yet — pick a preset or add one.

CSS Colour format rgba() rgb() hex (#rrggbb) hex with alpha (#rrggbbaa) Copy

none

—

Layers are rendered back-to-front, just like CSS. The preview is a live box-shadow; the CSS in the box above is exactly what you would paste into your stylesheet. Pure client-side.