Learn how to use the box-shadow property to add depth to cards, images, and buttons — and use the Box Shadow Generator to design the perfect shadow.
💡 The Concept
CSS box-shadow adds a shadow around an element’s box — great for making cards appear to float, adding depth to images, and drawing attention to buttons.
Box shadows add depth and dimension. Here are some examples:
1. The simplest form is a classic offset shadow like the first example shown at right. That example would be a good shadow for a button because it looks clickable.
2. Shadows don’t have to be black or gray as as in the second example.
3. With shadows you can create a floating effect, as if the element is hovering above the page.
The basic syntax takes four values: horizontal offset, vertical offset, blur radius, and color.
box-shadow: 2px 2px 2px black;
Here’s what each value does:
Horizontal offset — how far the shadow shifts left or right (positive = right, negative = left)
Vertical offset — how far the shadow shifts up or down (positive = down, negative = up)
Blur radius — how soft the shadow is (0 = sharp edge, higher values = softer)
Step 2. Open the Box Shadow Generator, design a shadow for the image, copy the CSS, and paste it into the CSS panel. On the example below, I also added a white border to the image to give it a printed photo look.
Step 3. Create a soft, barely-there shadow by using rgba for the color with a low opacity value.
Step 4. Create a hard, dramatic shadow by setting the blur to 0.
Step 5. Try an inset shadow on the image.
📌 Tools of the Trade: Use the Box Shadow Generator to experiment with shadow values and copy the ready-to-use CSS. Bookmark the Tools of the Trade page for quick access to all course tools.
Frequently Asked Questions
Does box-shadow affect the layout of surrounding elements?
No. box-shadow is purely visual and does not take up space in the layout. The shadow can overlap neighboring elements without pushing them around, similar to how outline works.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the rectangular box of the element, even if the element has a transparent background or rounded corners. filter: drop-shadow() follows the actual shape of the element’s visible pixels, so it works correctly on transparent PNGs and irregular shapes.
Can I use rgba for the shadow color?
Yes, and it is recommended. Using rgba(0, 0, 0, 0.2) instead of black gives you a semi-transparent shadow that blends naturally with any background color. Pure black shadows often look harsh, especially on colored backgrounds.
What does an inset shadow do?
Adding the inset keyword moves the shadow inside the element instead of outside it. Inset shadows are commonly used to make buttons look pressed or to create the appearance of a recessed area, like an input field.
Can I stack multiple shadows on one element?
Yes. Separate each shadow with a comma: box-shadow: 2px 2px 6px black, -2px -2px 6px blue;. The shadows are layered in the order listed, with the first one on top. This technique is used for glows, layered depth effects, and borders that behave like shadows.
What does the spread radius do?
The optional fourth value (before the color) expands or contracts the shadow beyond the element’s size. A positive value grows the shadow larger than the element; a negative value shrinks it. Setting the offsets to 0 and using only a spread gives you a uniform glow effect around the element.
Why isn’t my box-shadow showing up?
The most common reasons: the shadow is the same color as the background, the blur and offset values are both 0, or a parent element has overflow: hidden which clips the shadow. Also check that you are applying it to a block-level element or an element with a defined size — inline elements like <span> may not display shadows as expected.
When should I use a colored shadow versus a neutral one?
On most professional websites, shadows use a dark neutral color with low opacity — something like rgba(0, 0, 0, 0.15) — so they blend naturally and don’t draw attention to themselves. The goal is usually to create a sense of depth without the viewer noticing the shadow at all. Colored shadows can work as a deliberate design choice — for example, a brand with a strong color palette might use a tinted shadow on a hero image. But as a general rule, if the shadow itself is the first thing someone notices, it’s probably too much. When in doubt, go neutral and subtle.
★ Key Takeaways
The box-shadow property adds a shadow around any element on your page. Combine offset, blur, spread, and color to get exactly the effect you want. Next up is CSS Text Shadows, where you will learn to add shadow effects to headings and text.
