CSS - Box Shadow

The box-shadow property in CSS provides shadows to boxes.

Box shadow in CSS with color

Let us apply shadow to a box and apply color red to it.

Example :

<html>
<head>
	<style>
		p {
			width: 200px;
  			height: 50px;
  			padding: 10px;
  			background-color: LightGray;
  			box-shadow: 5px 5px DodgerBlue;
		}
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

So, in the above example, we have created a box with 200px width and 50px height. And appliedthe shadow to the box and coloured it DodgerBlue.

And that is because of the box-shadow property of CSS.

box-shadow: 5px 5px DodgerBlue;

The box-shadow property has three values. The first value(i.e. 5px) is the horizontaldistance between the shadow and the box, the second value(i.e. 5px) is the verticaldistance between the shadow and the box and the third value is the color.

Box shadow in CSS with color and blur effect

Example :

<html>
<head>
	<style>
		p {
			width: 200px;
  			height: 50px;
  			padding: 10px;
  			background-color: LightGray;
  			box-shadow: 5px 5px 10px DodgerBlue;
		}
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

Now, if you see the above output, there is a blur effect along with the shadow and DodgerBluecolor.

That is because in the box-shadow property, we have specified the third value(i.e. 10px).This third value specifies the blur effect.

Box shadow in CSS with color, blur effect and spread radius

Example :

<html>
<head>
	<style>
		p {
			width: 200px;
  			height: 50px;
  			padding: 10px;
  			background-color: LightGray;
  			box-shadow: 0px 0px 15px 8px DodgerBlue;
		}
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

So, in the above example, we have created a box with shadow that is spread evenly.

That is because of the fourth value(i.e. 8px) in box-shadow property, the shadow is spreadevenly.

Box Shadow in CSS with Inner shadow

Example :

<html>
<head>
	<style>
		p {
			width: 200px;
  			height: 50px;
  			padding: 10px;
  			background-color: LightGray;
  			box-shadow: inset 0px 0px 10px 7px DodgerBlue;
		}
	</style>
</head>
<body>
	<p> This is the first paragraph </p>
</body>
</html>

Output :

So, in the above example, we have created a box with shadow that is created inside the box.

That is because of the inset keyword in the box-shadow property.

box-shadow: inset 0px 0px 10px 7px DodgerBlue;

❮❮ PREV NEXT ❯❯