CSS Box Shadow Generator

Visually build CSS box-shadow code with live preview — copy instantly

Quick Presets
Subtle4px 4px 8px
Card0px 4px 16px
Elevated0px 8px 32px
Floating0px 20px 60px
Focus Ring0px 0px 0px 3px
Insetinset 2px 2px 8px
Background
Generated CSS
box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.2);
How to Use the Box Shadow Generator
1
Adjust the sliders to control offset, blur, spread and opacity
2
Choose a shadow color using the color picker
3
Toggle between outer and inner shadow
4
Click Copy CSS and paste directly into your stylesheet
About CSS Box Shadow

The CSS box-shadow property adds shadow effects to elements. The syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. The inset keyword makes the shadow appear inside the element rather than outside.

Box shadows are used to create card depth, focus rings on form inputs, floating button effects, and neumorphic designs. Multiple shadows can be layered by separating them with commas. Use rgba() colors with low opacity for natural-looking shadows.

Frequently Asked Questions
box-shadow: offset-x offset-y blur-radius spread-radius color. For example: box-shadow: 0 4px 16px 0 rgba(0,0,0,0.12). Add "inset" at the beginning for an inner shadow.
The spread radius expands or contracts the shadow. A positive value makes the shadow larger than the element, negative makes it smaller. Setting spread to 0 means the shadow is the same size as the element before blur is applied.
Yes. Separate multiple shadows with commas: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.2). Layering shadows with different blur radii creates more realistic depth effects.