Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Box Shadows

Jason Larkin
Jason Larkin
13,970 Points
Posted by Jason Larkin
Jason Larkin
13,970 Points

Problems with drop shadows.

.box {
   box-shadow: 10px 10px 5px 15px color(#222);

}

I'm trying to create a drop shadow in the Box shadow challenge #2. I keep changing the order of the pixel designations and I'm getting nowhere. Thanks in advance for any replies.

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Looks like you just need to change the order and remove the parentheses and color property.

.box { 
    box-shadow: 10px 10px 15px 5px #222; 
}
Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you Dustin, that worked!

Pete England
Pete England
10,801 Points
Pete England
Pete England
10,801 Points

you also have too many values, box shadows work in this order

X Offset | Y Offset | Blur Value | Colour

So theoretically you want

.box { box-shadow: 10px 10px 5px #222; }

This will offset the shadow 10px on both the X & Y Axis, with a 5px blur on the shadow

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you Pete-good to know.

Sebastien Thiroux
Sebastien Thiroux
11,474 Points
Sebastien Thiroux
Sebastien Thiroux
11,474 Points

@Pete, it is actually possible to use that many values. The first values as you stated are for horizontal shadows, vertical shadows and blur.

The fourth value is for the distance you want the shadow to spread. This value is actually quite useful when you really want to control the way your shadows will look like.

Then comes the color value, and finally you can use the inset value, if you want your shadow inside instead of outside the element, which is the default behaviour.

I hope this clarify what one can do with the box-shadow property.

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thank you Sebastian, that clears up a great deal. Thanks.