CSS box-shadow: blur vs spread

CSS Box-Shadow: blur, spread, inset, multiple and one side shadow

First of all, there are six properties in CSS box-shadow: offset-x, offset-y, blur-radius, spread-radius, colour and inset. The writing order is like below.

{ offset-x    offset-y    blur-radius   spread-radius   color } 

or

{ inset    offset-x    offset-y    blur-radius   spread-radius   color }

When I first read these properties, I was very confused what is the difference between blur and spread. So I tried to write it down like below in the Codepen.

As you can see above the image, If the blur value increase, the shadow is more blurred. On the other hand, If the spread value increase, the size of the shadow is bigger as the value.

Tip1. Multiple shadow

Also, you can make multiple shadow like below. It is separated by commas.

Multiple shadow

/*..., ..., ...;  */
.multiple {
  box-shadow: inset 0 0 0 10px darkred, 0px 0px 0px 10px LightSeaGreen, 20px 20px 0px 10px darkblue;
}

Tip2. One side shadow

One side shadow

.oneSide {
  box-shadow: 0px 8px 6px -6px darkred;
}

Box-shadow generator

That’s a wrap 😃

✨📣 Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀