Box Shadow Generator
Create CSS box shadows with a visual editor.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
How to Use the Box Shadow Generator
Use the sliders to adjust the X offset, Y offset, blur radius and spread of your shadow. Pick a color with the color picker and set the opacity with the opacity slider. Toggle "Inset" for an inner shadow effect. Click "+ Add Shadow" to layer multiple shadows. The preview updates in real time. Click "Copy CSS" to grab the generated code.
Frequently Asked Questions
What is CSS box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can specify offset, blur, spread, color and whether the shadow is inset.
Can I add multiple shadows?
Yes! CSS supports comma-separated shadow values. Use the "+ Add Shadow" button to layer as many shadows as you like.
What does inset do?
The inset keyword moves the shadow inside the element, creating an inner shadow or pressed-in effect instead of the default outer shadow.
What is the spread value?
Spread controls how much the shadow expands or contracts. A positive value makes the shadow larger, while a negative value shrinks it.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur.
Open tool →