SHD
CSS Box Shadow Generator
Create beautiful CSS box shadows with a visual builder and live preview
Layer 1
5
5
15
0
0.20
#000000
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);About CSS Box Shadow Generator
Design CSS box shadows visually with sliders for horizontal offset, vertical offset, blur radius, spread radius, and color. Add multiple shadow layers for complex effects, toggle inset shadows, and see a live preview on a customizable element. Copy the generated CSS code with one click. Perfect for creating card effects, buttons, modals, and any element that needs depth and dimension.
How to Use CSS Box Shadow Generator
- 1Adjust the sliders for horizontal offset, vertical offset, blur, and spread
- 2Pick a shadow color and adjust its opacity
- 3Toggle 'Inset' for an inner shadow effect
- 4Add multiple shadow layers and copy the final CSS code
Frequently Asked Questions
The CSS box-shadow property adds shadow effects around an element's frame. You can set the horizontal and vertical offsets, blur and spread radii, color, and whether it's an inner (inset) or outer shadow. Multiple shadows can be layered for complex effects.
Yes. Click 'Add Shadow' to add additional shadow layers. Each layer has its own offset, blur, spread, and color settings. Multiple layers can create realistic depth effects like elevated cards or neumorphism.
An inset shadow appears inside the element instead of outside. It's commonly used for pressed button states, input fields, and neumorphic designs. Toggle the 'Inset' option to switch between inner and outer shadows.
Related Tools
IMG
Placeholder Image Generator
Generate customizable placeholder images for your designs and prototypes
GRD
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor and live preview
SHD
Color Shade Generator
Generate light and dark shades of any color for design systems
{ }
JSON Formatter
Format, validate, and beautify JSON data with syntax highlighting