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

HTML-CSS
1

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?

boxshadow1
shadow2

2

You can stack multiple box shadows on a single element.

2 Likes
3

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

4

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

1 Like
5

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

6

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

7

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

8

Now I learned something new. :smiley:

9

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.

https://codepen.io/zitrusfrisch/pen/wvcxy?editors=1100
https://codepen.io/roikles/pen/xbydH?editors=1100

Here is a tutorial video.

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

10

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