Isolating Css Box Shadows

See the Pen Isolating Css Box Shadows by TundraTech (@TundraTech) on CodePen.

Isolating Css Box Shadows

Description: A simple & often misunderstood CSS fundamental. To isolate a single shadow we apply a negative spread and offset in the desired direction, then add a blur radius of equal distance to compensate. For inset shadows, the spread remains constant but we apply an offset in the opposite(-ve) direction. For multiple sides/shadows, simply combine any of the desired single-side rules into a comma separated list.

Browsers: Chrome Edge Firefox Opera Safari

Made with: HTML CSS (SCSS)

Responsive:Yes

Posted: 11.06.2015

Similar Examples