CSS Box Shadow

❮ Previous Next ❯

CSS box-shadow Property

The CSS box-shadow property is used to apply one or more shadows to an element.

Specify a Horizontal and a Vertical Shadow

In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color.

A <div> element with a box-shadow

Example

Specify a horizontal and a vertical shadow:

div {
  box-shadow: 10px 10px;
}
Try it Yourself »

Specify a Color for the Shadow

The color parameter defines the color of the shadow.

A <div> element with a lightblue box-shadow

Example

Specify a color for the shadow:

div {
  box-shadow: 10px 10px lightblue;
}
Try it Yourself »

Add a Blur Effect to the Shadow

The blur parameter defines the blur radius. The higher the number, the more blurred the shadow will be.

A <div> element with a 5px blurred, lightblue box-shadow

Example

Add a blur effect to the shadow:

div {
  box-shadow: 10px 10px 5px lightblue;
}
Try it Yourself »

Set the Spread Radius of the Shadow

The spread parameter defines the spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Example

Set the spread radius of the shadow:

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}
Try it Yourself »

Set the inset Parameter

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

A <div> element with a blurred, lightblue, inset box-shadow

Example

Add the inset parameter:

div {
  box-shadow: 10px 10px 5px lightblue inset;
}
Try it Yourself »

Add Multiple Shadows

An element can also have multiple shadows:

Example

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Try it Yourself »

Cards

You can also use the box-shadow property to create paper-like cards:

1

January 1, 2021

Norway

Hardanger, Norway

Example

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
Try it (Text Card) » Try it (Image Card) »

Test Yourself With Exercises

Exercise:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Start the Exercise

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.