Effects
box-shadow
box-shadow casts shadows outside (or inside) an element’s frame. Separate several shadows with commas to layer them.
Syntax
none | <shadow>#
<shadow> = <color>? && [ <length>{2} <length [0,∞]>? <length>? ] && inset?Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
box-shadow: 0 1px 2px #0f172a1f, 0 16px 40px -8px #0f172a40;
}Controls
Shadow 1
inset
offset-x
offset-y
blur-radius
spread-radius
color
Shadow 2
inset
offset-x
offset-y
blur-radius
spread-radius
color
About
The four lengths
- The first two are the horizontal and vertical offsets. Positive values move the shadow right and down.
- The third is the blur radius. Larger values spread the shadow wider and lighter; negative values are not allowed. It defaults to
0(a sharp shadow). - The fourth is the spread radius. Positive values grow the shadow and negative values shrink it. A negative spread with a generous blur gives a soft shadow that falls only below the element.
Color and inset
Without a color you get currentcolor (the text color). Add inset to draw the shadow inside the frame.
Stacking and layout
With multiple shadows, the first one is drawn on top. Shadows don’t affect layout, so they never change the element’s size or push its neighbors. They also follow the rounded corners from border-radius.