Skip to content
If you are a web developer, you must probably have read tons of tutorials about css box-shadow property.
Many tutorials teach you how to use the box-shadow property of CSS. But, never tell you the ultimate power of box-shadow.
In this tutorial, you will learn css box-shadow with full-fledged examples & visuals. So, that you will never have to visit any other tutorial again.
At the end of this guide, you will have all the information you need to create an effective css box-shadow for your next project.
Syntax
Learning the syntax before actually diving into example projects is important.
Let's break down the values which we can utilize in box-shadow:
box-shadow:
- x-offset: means in x-direction (horizontal)
- y-offset: means in y-direction (vertical)
- blur-radius: strength of blurness (Optional)
- spread-radius: expand or grow the radius of the shadow (Optional)
- color: the color of box-shadow (Optional)
offset-x and offset-y
Write a css box-shadow for the register button. It should add the dark shadow in the direction x and y.
<a href="#"class="btn btn--1">Register</a>.btn--1{
box-shadow: 5px 5px #000;
}CSS box-shadow in the opposite direction
Write a box-shadow code for the login button.
It should add the dark shadow in the direction x and y, but it should be in the opposite direction with negative values.
<a href="#" class="btn btn--2">Login</a>box-shadow: -5px -5px #000;Note: Sometime css developers, write additional noise like:
box-shadow: 5px 5px 0 #000;
blur-radius is optional. If we are not using it, we should skip it.
CSS box-shadow with blur-effect
Add the blur radius for the Signup button.
<a href="#" class="btn btn--3">Signup</a>box-shadow: 5px 5px 10px #000;CSS box-shadow with spread-radius
Add spread-radius for the Signup button
<a href="#" class="btn btn--4">Signup</a>box-shadow: 0px 0px 5px 15px #000;Multiple CSS box-shadow
Create an Enroll Now button with multiple box-shadow.
<a href="#" class="btn btn--5">Enroll Now</a>box-shadow: 5px 5px 2px #000, 10px 10px 3px #fff;Multiple CSS box-shadow with transparent layer effect
Add transparent effect to enroll now button by adding the same background color as the background color of button parent for the first box-shadow and then for the second one, add the color you want.
<a href="#" class="btn btn--6">Enroll Now</a>box-shadow: 0 0 0 10px #FF5757, 0 0 0 20px #fff;css box-shadow inset
Write a code to add css inner shadow for the "create now button."
<a href="#" class="btn btn--7">Create Now</a>box-shadow: inset 0 0 20px 0 #000;Set transparency in the CSS box-shadow
You can utilize rbga() colors to do that.
<a href="#" class="btn btn--8">Run Daily</a>box-shadow: 5px 5px 10px rgba(0,0,0,0.5);CSS box-shadow bottom only
<a href="#" class="btn btn--9">My Job</a>box-shadow: 0 10px 10px -10px #000;Now, it should be easy for you. We don't want to add shadow in x-direction:
box-shadow: 0 10px #000;
Let's take this example a little further. The button should look like it has a box-shadow underline
box-shadow: 0 10px 10px -10px #000;
Note: Just put the spread-radius value in the negative of blur-radius.
Css box-shadow generator
There are several different tools to generate box-shadow, but here is the link to one of them, which you will definitely like.
I want you to play with it, with the knowledge you learned, it will help you to sharpen your skills in more depth.
Now, as an example create an effect like add the box-shadows to all the elements except the first child. Well, you can do it with the combination of :not css selector.
That's enough for today, hope you found this article helpful and learned a new value or approach.
And if you want to see the examples in action, visit our code-pen: CSS box-shadow with examples
Same like this, we're bringing much more content on CSS.
