Download

Or install via npm:

npm install box-shadows-css --save-dev

Basic Usage

1. Include the stylesheet on your document's <head>: 

<head>
    <link rel='stylesheet' href='/box-shadows.css'>
    <!-- or -->
    <link rel='stylesheet' href='/box-shadows.min.css'>
</head>

2. Add the class .bShadow to the block you want to use: 

<div class='bShadow'></div>

3. Next, you need to add an additional number to the existing bShadow or add nearby bShadow bShadow-number. For example, if you want to use a : 

<div class='bShadow-1'></div>
<!-- or -->
<div class='bShadow bShadow-1'></div>

Now the collection has more than 60 shadows with the number, as well as four additional classes .bShadow, .bShadow-light, .bShadow-inset and .bSnone.

bShadow
bShadow-light
bShadow-inset
bSnone

Create file .min.css

1. Hover over blocks to see them in action. The result of the display in blocks and as a shadow for the nearest container.

2. You can click on the liked blocks ↓ to generate their class and box-shadow in the block below ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Click 'Download' and install the downloaded file according to the Basic Usage.

Generator CSS Box-shadow

Use the generator and complete the collection with your own styles. By clicking the 'save and add the next' button, you can create several more classes. Then, click in the field with the created classes and combination of keys Ctrl + C copy the received styles into your or downloaded min.css file.

-100 100 L / R (0)
-100 100 T / B (0)
-000 100 Blur (1)
-100 100 Spread (10)
0000 R
0000 G
0000 B
0000 A (Opacity)