CSS box-shadow property with 9 Solid Examples

CSS box-shadow property with 9 Solid Examples

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.



Learning the syntax before actually diving into example projects is important.

Let's break down the values which we can utilize in 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>
 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.

Our Coding guides: 

Leave a comment

All comments are moderated before being published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.