Free CSS Box Shadow Generator
Create beautiful CSS box-shadow effects with a visual editor. Adjust offset, blur, spread, color and opacity. Copy the CSS code instantly.
All processing happens in your browser. No data is sent to any server.
Preview
Preview Box
#1a1a2e#1e293bShadow 1
Offset X4px
Offset Y4px
Blur10px
Spread0px
#3b82f6Opacity40%
Generated CSS
box-shadow: 4px 4px 10px 0px rgba(59, 130, 246, 0.40);
border-radius: 16px;What Is CSS Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. It is one of the most used CSS properties for creating depth, elevation, and visual hierarchy in modern web design.
A box shadow is defined by its offset-x, offset-y, blur-radius, spread-radius, and color values. Multiple shadows can be applied by separating them with commas, and the inset keyword creates inner shadows.
Box Shadow Syntax
box-shadow: offset-x offset-y blur spread color;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1); Tips: Use subtle shadows with low opacity for a natural look. Layer multiple shadows for more depth. Negative spread values create tighter shadows, while the inset keyword creates pressed/recessed effects.