Effects

box-shadow

Learn how to use the CSS box-shadow property.

CSS box-shadow

The box-shadow property sets the box shadow for an HTML element.

Syntax

.element {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

HTML Context Example

<div class="card">
  This is a styled element.
</div>

<style>
.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>

Notes

Experiment in the CSS playground to see how this affects layout and styling.