CSS box-shadow property with 9 Solid Examples

Written by Shan Shah
Published on August 5, 2021
4 mins read
css box-shadow property with 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.

Syntax

css box-shadow

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

css box shadow property with examples

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

css box-shadow with negative values

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

css box-shadow blur-radius

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

spread-radius box-shadow

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

multiple css box-shadows

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

css box-shadows

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

inner box-shadow

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

css box-shadow transparency

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

bottom only box-shadow css
<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.

Make sure to subscribe to our newsletter and share this tutorial with others

CSS box-shadow property with 10 Solid Examples Click To Tweet
Become a better Web Developer in 15 minutes a week. Join Now 📩
We hate spam, unsubscribe anytime.
Connect Now
Ask Web Dev queries, get instant answers and stay up to date.
JOIN OUR FACEBOOK GROUP
Coder Champ © 2021 - 
Privacy Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram