Design layered CSS box shadows visually — copy the code instantly.
CSS Box Shadow Generator
box-shadow: 0px 8px 24px -4px rgba(26, 35, 50, 0.18), 0px 2px 6px 0px rgba(26, 35, 50, 0.10);
The CSS Box Shadow Generator lets you craft beautiful, layered shadows for any HTML element — all without touching code first. Adjust offset X and Y, blur radius, spread, color, and opacity with intuitive sliders. Stack multiple shadow layers for realistic depth, preview your design live, and copy the ready-to-paste CSS box-shadow rule with a single click.
Click 'Add Layer' to add a new shadow on top of your existing ones. Select each layer in the list to edit its settings independently. All layers are combined into a single box-shadow CSS value you can copy.
Spread radius expands or contracts the shadow before blurring. A positive value makes the shadow larger than the element; a negative value shrinks it, which is useful for creating realistic lifted-card effects.
Checking Inset turns the shadow inward, drawing it inside the element's border instead of outside. This is commonly used to create pressed-button states, inner glow effects, or recessed UI panels.
Yes — the generator outputs a standard CSS box-shadow property value. Paste it directly into a stylesheet, a style attribute, or a Tailwind config's boxShadow extension under your custom key.