CSS Box Shadow Generator
Fine-tune a CSS box-shadow visually, stack multiple layers, and copy the ready-to-use code.
Layer 1
0px
10px
20px
0px
Shadow Color
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);About CSS Box Shadow Generator
This tool provides live sliders for every part of the CSS box-shadow property — horizontal and vertical offset, blur radius, spread radius, color, and opacity — plus an inset toggle, so you can dial in exactly the shadow effect you want for cards, buttons, or modals. Add multiple shadow layers to build realistic, elevated depth the way design systems like Material Design do — typically a soft, large, low-opacity shadow combined with a tighter, sharper one. The preview box updates instantly as you adjust each control, and the final comma-separated CSS declaration is ready to copy and paste directly into your stylesheet.
Read the full CSS box-shadow guideFrequently Asked Questions
Offset-x moves the shadow horizontally (positive values move it right) and offset-y moves it vertically (positive values move it down).
Blur radius softens the shadow's edges — higher values create a more diffuse shadow. Spread radius expands or shrinks the shadow's size before blurring is applied.
Inset changes the shadow from an outer drop shadow to an inner shadow that appears to recede into the element, useful for pressed-button or inset-panel effects.
A single shadow often looks flat or harsh. Combining a soft, spread-out, low-opacity shadow with a tighter, sharper one (a technique used in Material Design and most modern design systems) creates a more realistic sense of elevation. The box-shadow property accepts multiple shadows separated by commas — each layer here becomes one of them.