A Collection Of Cross-browser CSS Box Shadows – Box-shadows.css

Preview:

Description:

Box-shadows.css is a CSS library that makes it easier to add cross-browser CSS box shadows to any boxes with 50+ built-in shadow effects.

Also provides a box shadow generator that helps you generate your own styles.

See also:

• Material Design Box Shadows
• Interactive Shadow Effects With jQuery

How to use it:

Download and include the minified version of the Box-shadows.css in the head section of the html document.

<link rel="stylesheet" href="/path/to/box-shadows.min.css">

Add the class bShadow to the target elements and done.

<div class="box bShadow">
  ...
</div>

Apply the variants of shadows.

<div class="bShadow bShadow-1"></div>
  ...
<div class="bShadow bShadow-54"></div>

Changelog:

v1.0.5 (10/05/2018)

• Removed prefixes: -webkit-, -moz-, -ms-
• Added file box-shadows.scss
• Added file box-shadows.css.map

v1.0.4 (06/18/2018)

• The number of blocks is increased.
• Сhanged the order of blocks.