How to Add Shadow Effect Using CSS

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

css

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

The parameters marked with question marks (?) 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.

html

<!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>

css

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.

css

box-shadow: 10px 20px 10px;

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

css

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

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

css

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