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: Click the 
button in the code editor above to see the output of our HTML/CSS code.
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;
}Click the 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;
}Click the 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;
}Click the 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;
}Click the 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:
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
<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;
}Click the 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!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
