The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →You can create a CSS box shadow by writing a box-shadow declaration directly, or by adjusting it in MDN’s visual generator or Chrome DevTools’ Shadow Editor. In either case, copy the resulting CSS into your stylesheet and check it on the element and background where it will appear.
Write a box shadow directly in CSS
The box-shadow property adds shadow effects around an element’s frame, as MDN Web Docs explains. Its values describe the shadow’s position, softness, size and color.
As an Amazon Associate I earn from qualifying purchases.
.card {
box-shadow: 0 8px 24px 0 rgb(0 0 0 / 0.16);
}This example places a subtle dark shadow below a card. The general value order is horizontal offset, vertical offset, optional blur radius, optional spread radius and color. You can also add inset to place the shadow inside the element.
- Horizontal offset: A positive value moves the shadow right; a negative value moves it left.
- Vertical offset: A positive value moves it down; a negative value moves it up.
- Blur radius: Increasing it softens and spreads the shadow’s edge. If omitted, the shadow is sharp.
- Spread radius: A positive value expands the shadow; a negative value contracts it.
- Color: Set the hue and transparency to control contrast against the page.
inset: Makes the shadow appear inside the element rather than outside it.
Start with offsets and color, then adjust blur and spread one at a time so you can see what each change does. These controls and their order are documented in MDN’s box-shadow reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Generate a shadow with MDN’s visual controls
If you would rather adjust a preview than edit values by hand, use MDN’s Box-shadow generator. It displays CSS output as you configure the shadow.
- Open the generator and choose or configure the preview element.
- Add a shadow layer and adjust its color, position, blur, spread and inset setting.
- If you need more than one layer, add additional shadows and reorder them as needed.
- Copy the CSS from the output panel into your stylesheet and adapt the selector to your element.
The generator also supports pseudo-elements. Treat its output as a starting point: the preview may not match the size, background or surrounding content of your actual page.
Edit a shadow on an existing page in Chrome DevTools
When the element is already on a page, Chrome DevTools can let you adjust its existing box-shadow declaration visually. Select the element, find the declaration in the Styles pane, and open the Shadow Editor. Chrome’s DevTools CSS reference describes controls for shadow type, horizontal and vertical offsets, blur and spread; edits apply to the selected element.
Use this route when you want to tune a real page element in context. After settling on the result, copy the edited declaration into the source stylesheet or component where the style belongs; a change made in DevTools is not a substitute for updating your project’s code.
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
Use multiple shadows or an inner shadow
You can layer shadows by separating them with commas. The first shadow listed is painted on top, so order matters when layers overlap. For example, two shadows can combine a close, sharper edge with a wider, softer one:
.card {
box-shadow: 0 2px 6px rgb(0 0 0 / 0.12),
0 10px 24px rgb(0 0 0 / 0.10);
}Add inset to a layer when the effect should be inside the element. You can combine inset and outer shadows in one declaration, but keep each layer readable and check how they interact in the rendered page. MDN documents comma-separated layers and their painting order in its box-shadow reference.
Choose between box-shadow and drop-shadow()
A box shadow follows the element’s box, including rounded corners. For an image with transparent areas, that can create a shadow around the full rectangular image element rather than around the visible subject. If the shadow should follow the visible silhouette, consider CSS filter: drop-shadow(), which follows the input image’s alpha shape. MDN explains the distinction in its drop-shadow() reference.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteChoose based on the shape you want the shadow to follow: the element’s rectangular or rounded frame, or the visible outline of image content.
Best Value
Check the result where it will be used
Once you have CSS, view the element at its real size on its actual page background. Adjust the offsets for direction, then tune blur, spread, color and transparency until the shadow separates the element without competing with nearby content. A generator or editor makes values easier to change; the page itself determines whether those values work in context.
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.
