CODEWITHSUNDEEP
css
URL87
URL87

Reputation: 11022

What do the parameters after “inset” mean in this CSS box-shadow syntax?

I came across a box-shadow attribute that was written with the following syntax:

box-shadow: 0 1px 1px rgba(0,0,0,0.24),inset 0 -22px rgba(23,49,76,0.03);

I followed the w3s documentation for box-shadow and got what it mean until the bit after the inset argument. The additional parameters after inset aren't clarified there.

So, what is the meaning of these additional values?

0 -22px rgba(23,49,76,0.03)

Upvotes: 0

Views: 662

Answers (1)

Paul D. Waite
Paul D. Waite

Reputation: 98866

The parameters you describe are actually the offsets and colour of another box-shadow. The comma (,) in the value means two box shadows are being defined.

Some different indentation might make it clearer:

box-shadow: 0 1px 1px rgba(0,0,0,0.24),/* <-- Note the comma here, separating the two box shadows */
            inset 0 -22px rgba(23,49,76,0.03);

The W3C’s box-shadow documentation (which is more reliable than w3schools.com — w3schools is not linked with the W3C, despite their name) mentions this:

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property takes a comma-separated list of shadows

Upvotes: 2

Related Questions