Box Shadow Generator
Visual box-shadow generator with live preview. Copy CSS code. Multiple shadows support. Free box shadow generator tool.
Preview
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
How to Use
- • Adjust the X and Y offset sliders to position the shadow horizontally and vertically
- • Use the blur slider to control how soft or sharp the shadow appears
- • Adjust the spread slider to make the shadow larger or smaller
- • Select a color using the color picker
- • Adjust the opacity slider to control the shadow transparency
- • Preview the shadow in real-time on the preview box
- • Copy the generated CSS code and use it in your stylesheet
Create CSS box shadows with visual controls.
- • Card Design: Add depth and elevation to card components
- • Button Styling: Create hover effects and pressed states for buttons
- • Modal Windows: Generate shadows for modal overlays and popups
- • Material Design: Create material design-style elevation shadows
- • UI Depth: Add visual hierarchy and depth to interface elements
- • Prototyping: Quickly test different shadow styles during design iterations