What is the correct order of box shadow value position. If I put the color values at the beginning or at the end it works fine, but what is more correct? Does this matter in web browsers, or do they display both? Mozilla's website and examples have the color at the end. Which is more correct or are both correct? What about the other values of inset, offset-x-y, blur, spread-radius and their positions?

Color at the end:

/* offset-x | offset-y | blur-radius | spread-radius | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Color at the beginning:

/* color | offset-x | offset-y | blur-radius | spread-radius */

box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;

CodePudding user response：

The order of the values in the box-shadow property is as follows:

box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

It is important to note that the order of the values is fixed, and the values should be placed in the order listed above. It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.

For example,

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

It is generally considered good practice to place the color value at the end. It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.

CodePudding user response：

Putting the color at the beginning or end of the format string are both equally correct.

According to the formal syntax:

box-shadow = 
  none       |
  <shadow>#  

<shadow> = 
  <color>?                                   &&
  [ <length>{2} <length [0,∞]>? <length>? ]  &&
  inset?

Where && means that:

all these entities are mandatory but may appear in any order.

^{(Note that the question mark (?) denotes that an entity is optional, so in this specific case, not all are mandatory.)}