Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Basic Box Shadows

Basic Box Shadows


This video will teach you how the box-shadow property in CSS3 allows you to put drop shadows around your elements. A drop shadow effect on a dynamically sized element can be tricky to pull off, but box-shadow can do it with just a single line of code.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

    [CSS3 Borders - Basic Box Shadows - with Nick Pettit] [??]

  • 0:13

    Box shadow is a new CSS3 property that allows you to put drop shadows

  • 0:17

    behind your page elements.

  • 0:19

    If you've ever tried to create this effect before without the use of box shadow,

  • 0:23

    you know just how unnecessarily difficult it can be.

  • 0:27

    Box shadow aims to make it a whole lot easier.

  • 0:29

    Let's check it out.

  • 0:31

    Here you can see I've created a basic page for us to work with.

  • 0:34

    There is a div in the center of the page

  • 0:37

    that we'll be applying our box shadow to.

  • 0:40

    Switching over to my text editor, you can see that the markup is also pretty standard stuff.

  • 0:45

    There's a wrapper div, and there's the div right in the center of the page.

  • 0:50

    I've also applied some basic styling just to bootstrap the page

  • 0:54

    and make it a little bit prettier for us to look at.

  • 0:57

    We are going to be working in a separate style sheet just for the sake of clarity.

  • 1:03

    First I'm going to select my div,

  • 1:06

    and then I'm just going to apply a basic box shadow,

  • 1:09

    and then after it's been applied I'll step through it one piece at a time with you.

  • 1:14

    So we'll type WebKit box shadow,

  • 1:20

    and I'll set the X offset, Y offset,

  • 1:23

    and we'll apply color.

  • 1:28

    And we'll switch back to Google Chrome,

  • 1:30

    and you can see that a very rough shadow has been applied.

  • 1:36

    We can also do this in Firefox just by using the same syntax

  • 1:41

    and switching the browser prefix from WebKit to Mozilla.

  • 1:47

    You can see that this works in Firefox as well.

  • 1:50

    Pretty cool.

  • 1:52

    The first thing you probably notice are the browser prefixes, WebKit and Moz.

  • 1:57

    That's just there so that should the W3C decide to change the box shadow property

  • 2:02

    in the final specification, that we don't have compatibility problems down the road.

  • 2:07

    The first two parts of box shadow are the X offset and the Y offset.

  • 2:13

    In this case I've set them both to 10 pixels,

  • 2:16

    but you can also use ems as your unit of measurement.

  • 2:19

    However, you cannot use percentages.

  • 2:22

    Each one of these values measures from the upper left-hand corner of the element,

  • 2:26

    and the higher the number, the greater the offset will be.

  • 2:31

    You can also apply negative values to each one of these,

  • 2:35

    and I'll show you what that looks like in Google Chrome.

  • 2:39

    Just by applying a negative value, you can see that the shadow

  • 2:43

    has been flipped over to the upper left-hand side.

  • 2:46

    Now, what we've done so far is pretty interesting,

  • 2:48

    but it doesn't look very realistic.

  • 2:50

    We can add some realism by adjusting the blur radius and the opacity.

  • 2:55

    The first value is always the X offset.

  • 2:58

    The second value is always the Y offset.

  • 3:01

    But the third value is optional, and if you leave it blank,

  • 3:05

    there will be no blur radius.

  • 3:07

    However, if we were to add a value like 10 pixels here, for example,

  • 3:13

    we could switch back to our browser and see that the shadow has been blurred slightly.

  • 3:19

    Of course the higher the value for the blur radius,

  • 3:22

    the fuzzier the shadow will end up looking.

  • 3:26

    This also works in Firefox.

  • 3:30


  • 3:32

    Next up is the color of the shadow.

  • 3:35

    In this case I've set it to a hexadecimal value,

  • 3:38

    and I've set the color to black,

  • 3:41

    but this can actually be any color that you want.

  • 3:45

    We could use a solid color like normal,

  • 3:48

    but CSS3 introduces several new color models.

  • 3:52

    The RGBa color model allows for more subtle effects,

  • 3:56

    so let's give that a try.

  • 3:58

    RGBa is a function just like the URL function,

  • 4:03

    so you type RGBa and then you put parentheses right after that.

  • 4:08

    The RGBa function accepts four values.

  • 4:11

    There's the red value, the green value, the blue value, and finally, an alpha value.

  • 4:20

    The first three values are numbered between 0 and 255.

  • 4:26

    In this case I've set them all to be 0.

  • 4:29

    But the alpha value is a bit different.

  • 4:32

    Alpha has to be a number between 0 and 1.

  • 4:36

    We probably don't want our shadow to be 100% opaque,

  • 4:41

    so we'll take the alpha value down a little bit from 1 and we'll try 0.8.

  • 4:48

    Switching over to Google Chrome, you can see that the shadow

  • 4:52

    has lightened up a little bit, and when it's against patterned backgrounds

  • 4:57

    or other solid colors, this allows the shadow to blend in with the background,

  • 5:01

    and it makes it look a lot more realistic.

  • 5:04

    Just to show you some of the other things that you can do with the RGBa function,

  • 5:09

    we'll add in a little bit of blue,

  • 5:14

    and we'll dial down the opacity a little bit more.

  • 5:19

    Switching back to Google Chrome, you can see that our shadow

  • 5:23

    now has a slightly blue hue to it.

  • 5:28

    Of course this also works in Firefox,

  • 5:32

    so I'll just go ahead and copy and paste here

  • 5:34

    and change the browser prefix to Mozilla.

  • 5:39

    Switching over to Firefox, you can see that our shadow is also slightly blue in Firefox.

  • 5:45

    Pretty cool.

  • 5:47

    [?upbeat music?] [Think Vitamin Membership]

  • 5:50


Show full transcript