CSS Shadow


Go to main Page

Shadow in CSS

We can drop shadow in CSS and can give a 3d effect to the container or image.

In this chapter we will learn


Text Shadow Property

Text-shadow property is used to add shadow to text.

Example

h1 {
  text-shadow: 2px 2px red;
}

Box Shadow Property

Box-shadow property is used to add shadow to box.

Example

div {
  box-shadow: 10px 10px 5px grey;
}

Add shadow to image

Box-shadow property is used to add shadow to box.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style >
    img{
      box-shadow: 5px 5px 5px grey;
    }
  </style>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2019/04/24/14/48/hanover-4152279__340.jpg" width="300px" height="300px"> 
</body>
</html>