CSS Box Shadow Generator
Design CSS box shadows with live preview.
box-shadow: 5px 5px 15px 0px #000000;How to Use
Adjust the shadow parameters using sliders: horizontal offset, vertical offset, blur radius, spread radius, color, and opacity. You can add multiple shadow layers to create complex effects. The live preview updates instantly, and the generated CSS code is ready to copy and use in your stylesheets.
Common Use Cases
- Designing elevated card components with realistic depth shadows for Material Design
- Creating inset shadows for pressed button states or input field styling
- Building layered shadow effects for floating action buttons and modal dialogs
- Generating consistent shadow tokens for a design system or component library
Frequently Asked Questions
What does the spread radius do?
The spread radius expands or contracts the shadow. A positive value makes the shadow larger than the element, while a negative value makes it smaller. A spread of 0 keeps the shadow the same size as the element.
Can I add multiple shadows to one element?
Yes. CSS supports multiple box shadows separated by commas. This tool lets you add multiple shadow layers, which is useful for creating realistic depth effects with a subtle outer shadow and a tighter inner shadow.
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element rectangular box and supports spread and inset. The CSS filter: drop-shadow() follows the actual shape of the element (including transparency in images) but does not support spread or inset.