How to Add Box Shadow Using CSS

<Visibility & OpacityBackgrounds>

Code Playground is only enabled on larger screen sizes.

The box-shadow property allows you to add shadow effects around the element.

box-shadow: <offset-x> <offset-y> <blur-radius?> <spread-radius?> <color?>;

The parameters marked with the question mark (?) are optional.

The first two parameters control the horizontal and vertical offsets of the shadow. Try to change the offset value and see what happens.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="/styles.css" />
  </head>

  <body>
    <div></div>
  </body>
</html>

div {
  width: 200px;
  height: 200px;
  border: 1px solid orange;
  background-color: bisque;

  box-shadow: 10px 20px;
}

By default, the shadow is a solid box. You can add a blurring effect by specifying a blur radius.

box-shadow: 10px 20px 10px;

Or adjusting the size of the shadow box by adding a fourth value.

box-shadow: 10px 20px 10px 10px;

Optionally, you can change the color of the shadow with a color value.

box-shadow: 10px 20px 10px red;
<Visibility & OpacityBackgrounds>