CSS box-shadow Explained (Depth Without Images)
The CSS box-shadow property adds shadows to elements for depth. Learn its five values — offsets, blur, spread and color — and build one visually.
The CSS box-shadow property draws a shadow around an element, giving it depth without any image. A shadow is defined by up to five values plus a color.
The values, in order
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
- X offset — horizontal distance (positive = right)
- Y offset — vertical distance (positive = down)
- Blur — how soft the edge is; larger is softer
- Spread — how far the shadow grows before blurring
- Color — usually a semi-transparent black
Inset and multiple shadows
Add inset to draw the shadow inside the element. You can also stack several shadows separated by commas to build layered, realistic depth.
Design tip
Subtle shadows read as more professional: small offsets, gentle blur and low opacity usually beat heavy, dark shadows.
Build one now
Adjust the sliders in the box-shadow generator and copy the CSS. Related: CSS gradients explained.