Difference between Blur and spread in Box -shadow | Codeexecute

Difference between Blur and spread in Box -shadow

Box-Shadow property in css is for defining the shadow of any div or block element.
A quick look of all attributes assigned to the box-shadow property:-

Box-shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset;

Value Description Requierd/Optional
offset-x The horizontal displacement of the shadow from the div or block Requierd
offset-y The vertical displacement of the shadow from the div or block. Requierd
blur-radius The blur effect on shadow Optional ,Default value is 0
spread-radius Size of the shadow,Positive values to grow,negative values to shrink Optional ,Default value is 0
inset If inset keyword is specified then the shadow will be within border optional, Default shadow is assumed to be a drop shadow

Hence the blur radius (optional) is for blurring the shadow , for 0 value the shadow will be sharp, while the spread radius (optional) increase the size of the shadow and if negative then decreases the size of shadow.

If spread radius is 0 ,i.e. no size has been defined for shadow then the shadow will be same size as that of blur radius.

box-shadow:2px 2px #000;

No Spread , No Blur

box-shadow:2px 2px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 0px 3px #000;

Only Spread , 0 Blur

box-shadow:2px 2px 3px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 3px 3px #000;

Spread & Blur

box-shadow:2px 2px 3px -3px #000;

Negative Spread

box-shadow:0px 0px 3px 3px #000;

Spread and Blur with homogeneous shadow

box-shadow:0px 0px 3px 3px #000 inset ;

Inset shadow