Why does the box-shadow property have two lines in this example?

I understand the first line is offset x (0), offset y (10px), blur radius(20px) and color(rgba), but after the comma it has a whole other set. What is this doing?


You can stack multiple box shadows on a single element.


for what reason though? one line seemed to do the trick

Mostly for looks. That combination of box shadows gives the card an overall deeper-looking shadow.

1 Like

That it does. Could I accomplish this same effect with only the first line but making it more opaque?

I don’t think It will look nearly the same. But just mix and match to see what suits your taste.

In the example they had the box shadow on the upper left corner as well. How is this done?

Now I learned something new. :smiley:

Not exactly sure what you referring to but if you use negative numbers you can set it to the left/top.

box-shadow: 0 10px 20px rgba(0,0,0,0.19), -6px -6px 6px rgba(0,0,0,0.23);

You can make some pretty good looking 3D effect stacking shadows. Here are two examples using text-shadow, the same thing pretty much applies to boxes.


Here is a tutorial video.

There are box-shadow generators you play with, you can also do it in the browser.

Thank you I figured out the negative thing yesterday but this is a great help. I’m not quite into text transform yet but this will be a great reference