Box-Shadow: Explained


Ever noticed that neat little shadow on a box element ? Well, no matter how much jaw dropping it would seem, it is always doable. And how ? I’ll show you.

Come to the land of box-shadows and never be afraid. Really, it’s simple to implement and an eye candy. It is doable in just CSS. Yes, just CSS. And, just hang on, there’s a lot to come.

Just last week I was searching online for various solutions for box-shadows when I found this pen. It’s pretty awesome and the place I learned about box-shadow. Go check it out. It’s like a video, but ain’t one.

BUT, BEFORE, LET’S SEE A FEW CASES WHERE IT IS APPLICABLE

To start off with, there aren’t too may cases where we might find that box-shadow is useful:

  • When you want to highlight something on a website. This might be an opt-in form or an important message.
  • To add some shadow effect on an element that is part of our website.
  • To give neat shadows on elements that are curvy or blurred (you’ll learn that later)

THE BASIC STRUCTURE OF BOX-SHADOW

You need not think that box-shadow is a really tough thing to execute. No, it is really not. It is just a bunch of properties applied to an element that give it the shadow.

.box{
... Other properties you wish ...
box-shadow: 5px -5px 4px 0px #ffa300;
}

EXPLANATION

Let’s look at the code above. Box shadow is made from the box-shadow. And, the box shadow has various properties that define how the shadow will look.

The first value of the box-shadow sets the horizontal offset, ie, how much left or right will the shadow be. If the property is positive, it will be on the right side of the box. If it’s negative, the shadow will be on the left.

The second value represents the vertical offset, ie, how much upwards or downwards the shadow will be. If the value is positive, the shadow will be below the box. If it’s negative, the shadow will be above the box.

The third value sets the blur radius of the shadow. The higher you set this value, the blurrier your shadow will be.

The fifth value sets the spread radius. The higher the value, the bigger the shadow. Here, negative values are great for 1 sided shadows.

And, finally, the sixth value sets the color of the shadow. It is a hex value, and can be any color you want.

HOW TO MAKE MULTIPLE SHADOWS ON ONE ELEMENT ?

box-shadow-explained | Web-Designer ARsenal

Well, it is just as easy to make more than one shadow on a single element. Just add a comma, and put all the values you want for the second shadow. Just like this:

.box{
box-shadow: 5px 5px 4px 0px #ffa300 ,
 -5px 5px 3px 1px #ff0000;
}

As you can see, the second set of values are just the opposite from the first one, in this case, just to get the jist.

All in all, the values can be set for the second shadow as per the needs. They are just like before: horizontal offset, vertical offset, blur radius, spread radius and the shadow color.

BUT, HOW TO MAKE SHADOWS INSIDE OF THE BOX ?

Well, that’s not difficult either. Just by adding inset in the values, we can make the shadow be inside of the element:

.box{
box-shadow: 5px -5px 4px 1px #ffa300,
 -5px 5px 3px 1px #ff0000,
 inset -3px -3px 1px 1px #00ff00;
}

Did you noticed the code closely. By looking at it, you can tell that we can add more than 2 shadows to and element ! That’s not just it, those shadows can be inside or outside of the element.

FINAL CODE

Here’s the full code for you to use:

HTML

<html>
<head>
<title> Box-shadow demo</title>
</head>
<body>
<div class="box"> <h1>Box-shadow</h1>
  <h3>Look around the box for the shadow.
If you can't see it, upgrade your browser.
</h3>
</div>
</body>
</html>

Don’t worry, you can alter the contents as per your needs.

CSS

.box{
  width: 400px;
  height: 300px;
  box-shadow: 5px -5px 4px 1px #ffa300,
    -5px 5px 3px 1px #ff0000,
    inset -3px -3px 1px 1px #00ff00;
}

Again, don’t worry, you can change whatever you want to fit your needs.

LIVE EXAMPLE →

WRAP-UP

So, you saw how to make multiple box shadows in this post. The best part is that we can make multiple inside and outside shadows on just a single element.

But, I want you guys to take action and show me what you have done. Crop the images and share it on our facebook page. If it’s awesome enough, it will be promoted on the timeline. See you there.

Related reads:-

Enter your email address to follow this blog and receive notifications of new posts by email.

One thought on “Box-Shadow: Explained

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s