CSS box-shadow Property

This property allows you to cast a shadow from the frame of an element. It is used to create depth, elevation, and glowing effects within a user interface.

selector { box-shadow: h-offset v-offset blur spread color | inset | initial | inherit; }
none Default value that prevents any shadow from being cast by the element.
<length> Defines the horizontal offset, vertical offset, blur radius, and spread radius using standard units.
<color> Sets the color of the shadow using hex, RGB, RGBA, or named color values.
inset Changes the shadow from an outer shadow to one that appears inside the frame of the element.
initial Sets the property to its default value of none.
inherit Adopts the box-shadow value defined on the parent element.

Code Examples

A basic example showing a subtle drop shadow on a white card to create a sense of elevation.

<style>
.simple-card {
  width: 200px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
</style>
<div class="simple-card">Standard Shadow Card</div>

An advanced example using multiple shadows to create a Neumorphic design effect, including JavaScript to toggle an inset shadow when clicked.

<style>
.neo-box {
  width: 150px;
  height: 150px;
  background: #e0e0e0;
  border-radius: 20px;
  transition: box-shadow 0.3s ease;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
<div class="neo-box" id="interactiveBox">Click Me</div>
<script>
const box = document.getElementById("interactiveBox");
box.addEventListener("mousedown", () => {
  box.style.boxShadow = "inset 10px 10px 20px #bebebe, inset -10px -10px 20px #ffffff";
});
box.addEventListener("mouseup", () => {
  box.style.boxShadow = "10px 10px 20px #bebebe, -10px -10px 20px #ffffff";
});
</script>

Pro Tip

You can create a fake border that does not add to the element's width or height by setting the horizontal offset, vertical offset, and blur to 0, then giving the spread radius a positive value. This is great for adding a focus ring without causing the layout to jump or shift when the border appears.

Deep Dive

Think of box-shadow like a flashlight hitting a physical card. The horizontal and vertical offsets determine where the light is positioned. Positive values push the shadow right and down, while negative values pull it left and up. The blur radius acts like moving the light source further away; a higher number makes the shadow softer and more spread out. The spread radius actually grows or shrinks the shadow itself before the blur is applied. You can stack multiple shadows by separating them with commas, which is how pros create complex, realistic lighting or multi-colored neon glows. If you use the inset keyword, the shadow is cast inside the box, making the element look like it is pressed into the page rather than floating above it.

Best Practices

Use RGBA colors for your shadows instead of solid hex grays. By using a transparent black like rgba(0, 0, 0, 0.3), the shadow will blend naturally with whatever background color is behind it. Keep your blurs generous and your offsets subtle for a modern look. Heavy, dark, tight shadows usually look dated and amateur. If you are layering multiple shadows, put the sharpest shadow on top and the softest, most transparent shadow on the bottom to simulate realistic light physics.

Common Pitfalls

One major point to remember is that box-shadow does not take up space in the document flow; it is a purely visual effect that does not affect the Box Model dimensions. Also, if you do not specify a color, the browser might use the text color of the element, which can lead to inconsistent results across different browsers. Always define your color explicitly. Finally, be aware that rounded corners created with border-radius will also round the shape of the shadow automatically.

Accessibility

Shadows should never be the only way you convey information or state changes. Users with high-contrast settings enabled in their operating systems may not see shadows at all. If you use a shadow to indicate that a button is focused or active, make sure there is also a secondary indicator like a border change or background color shift to ensure everyone can see the interaction.

Dev Data Table: box-shadow property

default none
animatable yes
inherited no
experimental no
year_intro 2009
year_standard 2011
js_syntax_1 element.style.boxShadow = "10px 10px 5px #888888";
js_syntax_2 element.style.setProperty("box-shadow", "10px 10px 5px #888888");
js_note When targeting this property via the style object in JavaScript, use camelCase naming convention.
browsers { "Chrome": 10, "Edge": 12, "Firefox": 4, "Safari": 5.1, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 11 }
results render here...