CSS Generator
Box Shadow Generator
Design layered shadows with linked sliders, editable values, color controls, inset mode, randomization, and shareable permalinks.
box-shadow
Preview Surface
Controls
Stack up to 6 shadow layers.
Layer 1
Output
Copy-ready CSS
Pure CSS
box-shadow: 0px 18px 45px -18px rgba(39, 191, 173, 0.36);Tailwind v4
shadow-[0px_18px_45px_-18px_rgb(39_191_173_/_0.36)]Presets
Popular Box Shadow Presets
Start from a refined shadow, then open the preset page for copy output and related styles.
Soft 3
A wider ambient shadow that stays restrained.
Paper 2
A layered paper effect for document-style cards.
Elevation 4
A medium material shadow for layered panels.
Elevation 12
A high elevation for command palettes.
Dark Neuro Soft
A dark neumorphic shadow with restrained contrast.
Neon Blue
A saturated cyan-blue glow for dark interfaces.
Neon Pink
A hot pink glow for expressive highlights.
Soft Glow
A quiet colored halo for callouts and badges.
Layered Card
A multi-layer card shadow with clear ambient depth.
Solid Offset
A hard offset shadow with poster-like contrast.
Warm Shadow
A warm tinted shadow for cream or coral surfaces.
Inner Glow
A colored inset glow for selected controls.
More tools