This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Like text-shadow, we're able to cast shadows off elements with the box-shadow property.
Quick Reference
The order of values for box-shadow is exactly like the order of values for the text-shadow property:
.wildlife {
box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8);
}
The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The last value sets the color of the box shadow.
The optional third value defines the blur radius in a box shadow. The optional fourth value defines the spread distance of a box shadow.
Inner shadows
By default, box shadows are created as drop shadows outside of the element. To create an inner shadow, we can add the keyword value inset
:
.wildlife {
box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 1);
}
Multiple values
Just like the text-shadow
property you can use multiple box-shadow
values separated with a comma like so:
.wildlife {
box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8),
inset 0 0 50px 10px rgba(0, 0, 0, 1);
}
You need to sign up for Treehouse in order to download course files.
Sign up