CSS Box Shadow Generator
Visually create multi-layer box shadows with live preview and copy-ready CSS.
Presets
Shadow Layers
Preview
Generated CSS
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.30);
What the CSS Box Shadow Generator does
The CSS Box Shadow Generator lets you build a box-shadow visually instead of guessing at numbers in your stylesheet. You control the horizontal and vertical offset, the blur radius, the spread, the colour and the opacity, and a live preview shows the result on a sample element as you change each value.
A key feature is support for multiple stacked shadows. Real-world depth is rarely created by a single shadow — material and elevated UI styles layer several soft shadows on top of each other. This tool lets you add as many layers as you like, edit each one separately, and combines them into a single comma-separated box-shadow declaration.
It is useful for designers and developers building buttons, cards, modals, tooltips and neon or glow effects, and for anyone who wants to understand how offset, blur and spread interact.
How to use it
Begin with a preset such as Soft, Elevated, Material, Inner or Neon to get a tested starting point, then tweak the sliders for the active layer. The horizontal and vertical offsets move the shadow, blur softens its edge, and spread grows or shrinks it relative to the element.
Toggle the inset option to turn an outer shadow into an inner one, which is handy for pressed buttons and inset panels. Pick a colour and opacity to match your design — the tool converts your hex colour and opacity into an rgba value automatically.
Add extra shadow layers with the add button and select any layer to edit it. When you are happy, copy the generated CSS and paste the complete box-shadow rule into your stylesheet.
Tips for realistic shadows
Subtle shadows almost always look better than harsh ones. Low opacity (around 0.1–0.2) combined with a generous blur produces a soft, believable lift, which is why the Elevated and Material presets stack several low-opacity layers rather than one dark shadow.
Use a small negative spread on large blurred shadows to keep them tucked under the element, and reserve high-opacity, zero-blur shadows for deliberately flat or retro long-shadow styles.