The Real Beauty of CSS3 Box Shadows

You might have used CSS3 box shadows several times to create some pretty looking drop shadows like you do in Photoshop. That’s great! But do you even know how it can be used for some other mind boggling purposes ? If not, then you are definitely going to like what I am about to show you.

First, lets talk about the box-shadow property. It is a property introduced in CSS3 which accepts a maximum of 6 parameters in which 4 are optional!

  • The first parameter is inset. Want the shadows inside the box rather than outside it ? Use it then. Oh, and it is optional.
  • Second one is the x-offset. This defines the offset of the shadow in the x-direction (horizontally). Negative values can be used to move the shadow in the left direction. This parameter is required.
  • Third one is the y-offset. Similar to x offset, but defines the position of the box shadow in y direction i.e. vertical direction. This is also a required parameter.
  • Fourth is the blur radius. It defines how much blur you want on the shadow. A higher value will give you a higher blur radius and more smoother shadow. The default value is 0 if not specified.
  • Fifth one is the spread. This will be the most important thing in this article and we will discuss a lot about it so skip this for now. This is optional and default value is 0.
  • Finally, the last parameter box-shadow accepts is the color. You can pass any type of color here, like a string, hex code, rgb, hsla, rgba etc. This one is optional with the default being black. Update: This one is not optional but some browsers may use black as default if no color is specified (example is Chrome on Windows and Ubuntu) while others will interpret it as a transparent shadow (examples are Chrome on Android and Safari).

Super! So basically, now we know that the syntax is:

box-shadow: inset x-offset y-offset blur-radius spread color

Now you must be thinking, “I already know this, where’s the real beauty man?”. Fine, Let me continue step by step and explain each of the parameters further and you’ll slowly grasp the real beauty!

X and Y Offsets

In this step, we will just use the two required properties and see what we get. Try using negative values and see the result.


Nice, so we got what we wanted. A simple 8-bit kind-of drop shadow that looks good in some cases. The shadow is 10px to the right and 10px to the bottom. Also note that the default color of the shadow is black and it has no blur.

Inset

Now, lets try the inset parameter.


Great! That’s a nice looking inset shadow with, again, no blur and default black color.

Blur Radius

Lets blur the shadow a bit to make it smooth. Play with the blur radius yourself to get a better understanding of it.


Looks pretty good on both the normal and inset shadows.

Colors

Adding some colors on the previous example.


As you can see, I used both the color name and the rgba value. You can also try hex color codes, rgb values, hsla values etc.

Spread

Now we’ll talk about the spread of the shadow. It basically means how much you want to spread the shadow. It can be negative or positive making the shadow smaller / bigger respectively.

You must know that box-shadows take the shape of their parent, so spread will only make the shadow bigger or smaller but the height / width will remain in constant proportions. This means, a rectangle can only have a rectangular shadow and a circle can only have a circular shadow. Now lets see this example:


As you can see, we changed the size of the shadow by using spread but also note that the proportions of the box are same for the shadow too.

Now, the real beauty is here. We can use multiple box-shadows to replicate an element multiple times having different positions (offsets) and different sizes (spread). How ?


Now, what’s the use of this knowledge? You can use this to create, like I described earlier, multiple copies of a single element without having to mess up with your markup and keep it clean. This can also be used to produce some quality pixel art or other things using just one element. You can combine this knowledge with pseudo elements so that you get 3 elements (2 pseudo and 1 main) and hence ship more box-shadow awesomeness. Oh, and you can have different shapes/sizes for your pseudo-elements, whoa!

Examples

Check out these examples below and see how you can use the box-shadow to do some extra cool things.

Single Element Things

The whole iPhone 4 created with just one element using box-shadows and pseudo elements by me. It is a codecast so its worth checking out ;)

A great experiment by Joshua Hibbert. It is also a codecast so check it out!

Artistic Things

A very interesting experiment with box-shadows to create a whole portrait of Mona Lisa! It has 7.5k lines of css code but its not hand crafted. Its pointless, but fun :)

Pixel Characters


This one is created by Kushagra Gour. This is also a very nice example, make sure you mess up with the code. ;)

Its a codecast created by me in which you’ll learn how to create a pixel character step by step using box shadows.

Apart from these, I also found these interesting by Hugo Giraudel.

Conclusion

I hope you understood the very basic concepts of CSS3 box-shadows and realized how powerful and flexible it is in reality. Although the aforementioned examples/demos are definitely pointless but its fun. Check out the codecasts I mentioned earlier and you will see the magic of box-shadows from even closer. Feel free to share your thoughts in the comments.

Share:

7 thoughts on “The Real Beauty of CSS3 Box Shadows

  1. Udo

    To make the shadow also visible in Safari make sure to always add a color with the box-shadow attribute. E.g. in the examples above that miss a color add ‘black’.

    The first example CSS then looks like this:


    .shadow{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 50px auto;
    box-shadow: 10px 10px black;
    }

    Udo

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>