Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
You can create a CSS box shadow by writing a box-shadow declaration and adjusting its values, or by using MDN’s visual generator or Chrome DevTools’ Shadow Editor. Copy the resulting CSS into your stylesheet, then check it on the page where the element will actually appear.
Write a box shadow directly in CSS
The basic syntax is box-shadow: x-offset y-offset blur-radius spread-radius color;. The first two lengths set horizontal and vertical position. Blur and spread are optional; color is optional too. Add inset to place the shadow inside the element.
For example:
.card {
box-shadow: 0 8px 24px 0 rgb(0 0 0 / 0.16);
}In this example, the shadow has no horizontal offset, sits 8 pixels below the element, has a 24-pixel blur radius, and has no spread. The color is black at 16% opacity. This illustrates the documented syntax; it is not a universal design setting. MDN describes box-shadow as adding shadow effects around an element’s frame (MDN Web Docs: box-shadow).
Adjust one value at a time
- 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: Increase it for a softer, more diffuse edge. A blur radius cannot be negative.
- Spread radius: Increase it to expand the shadow or use a negative value to contract it.
- Color and opacity: Choose a color and alpha level that make the element distinct without making the shadow distracting.
inset: Add this keyword when the shadow should appear inside the element rather than outside it.
Starting with offsets and then adding blur and color makes it easier to see what each change does. MDN’s box-shadow guide explains the values and provides another basic example.
#1 Best Overall
Generate a shadow with MDN’s visual controls
MDN’s Box-shadow generator is useful when you would rather adjust a preview than edit numbers by hand. It lets you choose a preview element, add shadow layers, change color and inset positioning, and adjust position, blur, and spread. The output panel shows the CSS to copy.
- Open the MDN Box-shadow generator.
- Choose the element preview and add a shadow layer.
- Adjust the shadow’s color, position, blur, and spread; enable inset if you want an inner shadow.
- Add or reorder layers if the effect needs more than one shadow.
- Copy the CSS from the output panel into your stylesheet and review it on your own page.
Edit a shadow on an existing page with Chrome DevTools
If the element already appears in a page you can inspect, Chrome DevTools can change its shadow in place. Select the element, find its box-shadow declaration, and open the Shadow Editor. Its documented controls adjust outset or inset type, x and y offsets, blur, and spread; edits are applied to the selected element.
Rank #2
- Open Chrome DevTools and select the element you want to edit.
- In the styles for that element, find the
box-shadowdeclaration. - Open the Shadow Editor from the declaration and adjust its controls.
- Copy the final declaration into the project stylesheet so the change persists beyond the current inspection session.
Chrome’s documentation describes the editor in its DevTools CSS features reference. The editor is suited to refining a shadow on an existing page; MDN’s generator provides a standalone preview and CSS output.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose between a box shadow and a silhouette shadow
box-shadow follows the element’s box, including rounded corners. For an image with transparent regions, that means the shadow follows the image element’s box rather than only the visible subject. If you want a shadow that follows the visible pixels’ silhouette, consider filter: drop-shadow(), which follows the input image’s alpha shape. See MDN’s drop-shadow reference.
Layer shadows when one is not enough
You can specify multiple shadows in one declaration by separating them with commas. The first listed shadow is painted on top. For example, a restrained broad shadow paired with a smaller, sharper one can create a layered effect; adjust each layer in the actual page context rather than assuming the same values suit every element.
MDN’s generator supports multiple shadow layers and pseudo-elements. In CSS, keep each layer’s values together and separate the layers with commas.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check the result in context
A preview helps you tune the declaration, but the final check belongs on the page where the shadow will be used. Look at the actual background and element size, and adjust the values until the element separates clearly without the shadow obscuring nearby content.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
