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