Syntax
box-shadow: offsetX offsetY blur spread color;Examples
A Basic Drop Shadow
The standard elevated-card look.
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* offsetX offsetY blur color */
}
.elevated {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}Inset Shadow and Layered Shadows
An inner shadow, and combining multiple shadows for realistic depth.
.pressed {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.layered {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);
}Parameters and values
- offsetX / offsetY (length): Horizontal and vertical shadow position
- blur (length): How soft/spread out the shadow edge is
- spread (length): Expands or shrinks the shadow size before blurring
- inset (keyword): Renders the shadow inside the element instead of outside
Best practices
- Use low-opacity black (rgba(0,0,0,0.1) or similar) rather than solid gray for more natural-looking shadows
- Layer multiple subtle shadows rather than one large one for a more realistic, soft elevation effect (a common design-system pattern)
- Use inset shadows for pressed/active button states or input field focus effects
- Keep shadow intensity proportional to elevation - small, subtle shadows for slightly-raised cards, larger and softer ones for modals and popovers
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Color Values
CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.Background Properties
Background properties control an element's background color and image. background-image sets one or more images, background-size controls their scaling, background-position controls placement, and background-repeat controls tiling. Multiple backgrounds can be layered by comma-separating values.Gradients
CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.Border Properties
border draws a line around an element's edge, controlled by width, style, and color, which can be set together via the border shorthand or individually per side (border-top, border-right, etc). border-radius rounds the corners, accepting one value for all corners or up to four for individual control.
CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.Background Properties
Background properties control an element's background color and image. background-image sets one or more images, background-size controls their scaling, background-position controls placement, and background-repeat controls tiling. Multiple backgrounds can be layered by comma-separating values.Gradients
CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.Border Properties
border draws a line around an element's edge, controlled by width, style, and color, which can be set together via the border shorthand or individually per side (border-top, border-right, etc). border-radius rounds the corners, accepting one value for all corners or up to four for individual control.