Skip to main content
X

Explore your training options in 10 minutes

CSS Box Shadow

James Gallagher - December 29, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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 Image of the "Run Code" Button, a triangle inside a circle 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 Image of the "Run Code" Button, a triangle inside a circle 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 Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

Venus, a software engineer at Rockbot

"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

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 Image of the "Run Code" Button, a triangle inside a circle 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 Image of the "Run Code" Button, a triangle inside a circle 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;
}

Click the Image of the "Run Code" Button, a triangle inside a circle 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.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.

Skip to main content