CSS box-shadow with the blur-radius value
Shadow blur is a technique to disperse the shadow's borders and blend them with a background element. Designers use this tool for creating more natural soft shadows. The blur-radius
value of the box-shadow
property defines how far the blurring spreads, and the larger the blurring, the more prominent it gets.
The blur radius can be specified in different length units, like pixels, inches, centimeters, etc., and can't take a negative value.
Pro Tip: If you omit the blur-radius
value or set it to 0, the shadow edges will be sharp.