What's the difference between spread radius and blur radius in box shadow

Hello, can someone explain what is the difference between spread radius and blur radius in the box shadow property in css please. How are both used together ?
4 Replies
Chris Bolson
Chris Bolson3mo ago
From mdn:
<blur-radius>. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
<spread-radius>. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
Faker
FakerOP3mo ago
in both cases the shadow become bigger? like shadow becomes bigger and lighter for blur radius and for spread radius, it also expands
Jochem
Jochem3mo ago
spread increases the size of the shadow without blurring it's like moving the light closer, the shadow will become bigger than the object blur is then applied to the edges to make the edges softer (and spread it further, but blurred)
Faker
FakerOP3mo ago
yep I see

Did you find this page helpful?