Recommended Free Tools
The CSS box-shadow property adds one or more shadows around an element’s frame. Set horizontal and vertical offsets to position a shadow, then use optional blur, spread, color, or inset values to control its appearance. You can also layer several shadows in one declaration.
What does box-shadow do?
box-shadow paints a visual shadow effect in relation to an element’s frame. It can make a card appear raised, create an inset effect, or add a crisp outline-like edge. It decorates the element; it does not add meaning or content.
The property applies to all elements and ::first-letter, is not inherited, and has an initial value of none. See MDN’s box-shadow reference for the formal definition and syntax.
How do you add a basic CSS shadow?
Put the property in a CSS rule and provide at least the horizontal and vertical offsets:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.18);
}Read the values in order: 0 means no horizontal shift; 4px moves the shadow down; 12px sets the blur radius; and rgb(0 0 0 / 0.18) gives it a translucent black color. Because the horizontal offset is zero, the shadow is centered left-to-right rather than shifted to one side.
What do the shadow values control?
- Horizontal offset: moves the shadow left or right. A positive value shifts it right; a negative value shifts it left.
- Vertical offset: moves it down or up. A positive value shifts it down; a negative value shifts it up.
- Blur radius: softens the shadow’s edges. A larger blur looks softer; zero keeps the edge crisp.
- Spread radius: expands or contracts the shadow before blur. Positive spread enlarges it; negative spread reduces it.
- Color: sets the shadow tint. Transparency can make an effect less visually heavy.
Blur and spread are optional. For a crisp, outline-like effect, use zero blur and a spread value, for example:
.card {
box-shadow: 0 0 0 2px #356ac3;
}A border or outline may communicate a real boundary more directly than a shadow; choose the effect that matches the purpose.
How are inset and outset shadows different?
An ordinary shadow is outset: it appears outside the element’s frame. Add inset to draw the shadow inside the frame instead:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.inset-panel {
box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.2);
}Inset shadows can suggest a recessed surface. Outset shadows can suggest that an element sits above its surroundings. In either case, the shadow relates to the element’s frame—it does not trace the visible pixels of a transparent image.
How do you create multiple shadows?
Separate shadow values with commas. The first listed shadow is painted above the later shadows, so order affects the final appearance:
.card {
box-shadow:
0 2px 4px rgb(0 0 0 / 0.12),
0 8px 20px rgb(0 0 0 / 0.10);
}Each layer can have its own offsets, blur, spread, color, and inset setting. A single layer is simpler to maintain; multiple layers let you combine effects, such as a tight edge with a broader, softer shadow.
What happens when an element has rounded corners?
If the element has a border-radius, its shadow follows the rounded corners. This helps the shadow match the shape of a rounded card or button rather than appearing rectangular. The behavior is documented in MDN’s CSS backgrounds and borders guide.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Best Value
Can a shadow replace a border or keyboard focus indicator?
Use shadows as decoration, not as the only way to communicate an important state. In particular, do not remove a visible keyboard focus indicator and replace it only with a subtle shadow: users may have difficulty perceiving the shadow. Keep a clear focus treatment, and ensure text remains legible against colored backgrounds. MDN advises that text over a background image or color needs enough contrast to be legible; it also notes that screen readers cannot parse background images, which should therefore be decorative. See MDN’s backgrounds and borders learning guide.
Is box-shadow supported in browsers?
MDN labels the property “Baseline” and “Widely available,” with cross-browser availability dating to July 2015. That established support does not guarantee that every browser supports every newer syntax extension described in the CSS Borders and Box Decorations module. Check compatibility data when using newer syntax; the property’s current support information appears in MDN’s reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
