CSS Box Shadow Generator
Design CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
5 of 5 uses remaining today
Shadow Layers
Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
CSS Grid GeneratorBuild CSS Grid layouts with a visual editor. Define columns, rows, gaps, and span cells across areas.
Frequently Asked Questions
How do box shadow values work?▾
Box shadow takes offset-x, offset-y, blur radius, spread radius, and color. Offset controls position, blur controls softness, and spread controls size. Negative spread makes the shadow smaller than the element.
Can I add multiple shadows?▾
Yes. Click "Add Shadow" to add additional shadow layers. Multiple shadows are common in modern design for creating depth and elevation effects.
What does the inset option do?▾
The inset keyword changes the shadow from an outer shadow (drop shadow) to an inner shadow. This creates a pressed or recessed appearance.
Can I control the shadow opacity?▾
Yes. Each shadow layer has an opacity slider (0-100%). The tool generates rgba() color values with the specified opacity.