CSS Box Shadow

When you’re designing an element in CSS, you may decide that you want to create a shadow effect around the frame of that element. For instance, you may want to create an image that has a shadow below the image.

That’s where the CSS box-shadow property can be useful. The box-shadow property allows you to add shadow effects around the frame of an element. This tutorial will discuss, with examples, how to use the CSS box-shadow property to add shadow effects to web elements.

CSS Box Shadow

The box-shadow property adds a shadow to an element. The box-shadow property can be applied to almost any HTML element, and the property can also be used with elements that have rounded corners.

The syntax for the box-shadow property is as follows:

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

Let’s break down this syntax and discuss each element:

offset-x is the horizontal offset for the shadow (required).
offset-y is the vertical offset for the shadow (required).
blur-radius is the blur effect added to the shadow (optional).
spread is the spread radius of the blur effect (optional).
color is the color of the shadow (optional, by default black).

Now that we know the syntax of the box-shadow property, we can explore a few examples of the property in action. In the below examples, we are going to use the following HTML element which we want to style:

<html>
<div>
	<p>This is a box.</p>
</div>

Our HTML element has the following style:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
 }

This is how our default box appears: CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.

Our box is 100px wide and 200px tall. The contents of our box have a 10px padding, which means there is a 10px gap between the text inside our box and the border of our box. In addition, our box is light blue.

Horizontal and Vertical Shadow

The most basic shadow you can create with the box-shadow property is a horizontal and vertical shadow. Here’s an example of our box with a horizontal and vertical shadow:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}

CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

In our code, we specified the offset-x and offset-y attribute and set them both to 10px. This creates a drop shadow that is black and offset by 10 pixels on both axes, as you can see above.

Shadow Colors

You can specify a color to a shadow using the color attribute. Suppose we wanted our shadow to be light gray. We could change the color of our box-shadow using this code:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px lightgray;
}

CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

Our box now has a light gray shadow.

Shadow Blur Effect

The blur-radius attribute is used to add a blur effect to the shadow. Suppose we wanted our shadow to have a 3px blur, which will make it slightly blurry. We could use this code to define the blur for a box:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 3px lightgray;
}

CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

This box is similar to the one from our last example, but if you look closely at the shadow you can see it is slightly blurred out.

Spread Effect

When you’re using the box-shadow property, you can add a spread radius to your shadow. This defines how much the shadow can spread in all directions. Suppose we wanted to make our shadow spread out 5px around itself. We could do so using this code:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 5px 5px lightgray;
}

CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

In this example, our shadow is slightly longer. This is because our shadow is extended by 5px due to the spread radius we have specified.

In our code, the attributes we specified are ordered in the following way:

offset-x
offset-y
blur
radius
color

Multiple Shadows

The box-shadow property can be used to add multiple shadows to an element. If you want to add multiple shadows to an element, you can use the syntax above and separate out your shadows using commas. Here’s the syntax for creating multiple shadows:

box-shadow: shadow1, shadow2;

When you’re working with multiple shadows, the offset values must be different for each shadow. Otherwise, your shadows will overlap and only the first shadow assigned a particular set of offset values will appear.

Suppose we wanted to have both a light gray and a pink shadow behind our box. We could create these shadows using the following code:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 5px 5px lightgray, 5px 5px pink;
}

Our code returns:

Inset Shadows

The inset keyword can be used to make a shadow appear inside an element. Suppose we want our light gray shadow to appear inside our box. We could make this happen using the following code:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}

CSS Box Shadow button in the code editor above to see the output of our HTML/CSS code.

The inset keyword allows us to change our shadow from an outer shadow to an inner shadow like you can see above.

Box Shadow Attributes

There are a number of attributes that can be used with the CSS box-shadow property. Here is a reference table of these attributes:

Attribute	Description
offset-x	Offset of the shadow on the horizontal (x) axis.
offset-y	Offset of the shadow on the vertical (y) axis.
blur	The blur radius of the shadow.
color	The color of the shadow.
spread	The spread radius of the shadow.
inset	Changes the shadow to an inner shadow.
inherit	Inherits a shadow from its parent element.

Conclusion

The CSS box-shadow property is used to add shadow effects to HTML elements.

This tutorial discussed, with reference to a few examples, how to use the box-shadow property to create custom shadows. Now you’re ready to start creating your own CSS shadows like a professional web developer!