CSS Box Shadow Generator Online - Free CSS box shadow generator with visual editor.
Free online CSS box shadow generator. Design layered shadows with live preview. Adjust offset, blur, spread, color, and inset. Copy CSS instantly.
Layer 1
-50px0+50px
-50px0+50px
0px50px100px
-50px0+50px
CSS Code
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10)How to Use CSS Box Shadow Generator
- 1Add one or more shadow layers using the "Add Shadow" button.
- 2Adjust X/Y offset, blur, spread, color, and inset for each layer.
- 3Preview the shadow on the box in real time.
- 4Copy the generated CSS code.
Frequently Asked Questions
What is CSS box shadow?
CSS box-shadow adds shadow effects around an element's frame. You can set multiple effects separated by commas, controlling offset, blur, spread, color, and inset.
Can I use multiple shadows on one element?
Yes. Click "Add Shadow" to add multiple shadow layers. Each layer can have different offset, blur, spread, and color values. They are combined in the CSS output.
What is the inset shadow?
An inset shadow is drawn inside the element's border, creating a sunken or recessed effect. Toggle the Inset checkbox to switch between outer and inner shadows.
Found a bug or have a suggestion? Report it on GitHub
Learn More
Guide
CSS Box Shadow Guide
How to create stunning layered shadows.
GuideCSS Drop Shadow Tutorial
box-shadow vs filter: drop-shadow.
GuideCSS Visual Effects
Shadows, gradients, transforms, and filters.
GuideLayered Box Shadows for Depth: Creating Realistic Elevation in CSS
Learn how layered box shadows create realistic depth and elevation in CSS. Compa
GuideBox Shadow Animation Techniques: Smooth Elevation and Hover Effects
Master CSS box-shadow animations for elevation changes, hover states, and intera
GuideCreating Realistic CSS Shadows
Techniques for layered, natural-looking shadows that mimic real-world light sour
GuideNeumorphism in CSS: Shadows Guide
How to create soft UI neumorphic effects with dual box-shadows in CSS.