<?xml version="1.0" encoding="utf-8"?>

CSS box-shadow with the blur-radius value

CSS box-shadow with the blur-radius value Bad Practice
CSS box-shadow with the blur-radius value Best Practice

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.

Topics

From Lesson

Share

Improve your UX & Product skills with interactive courses that actually work