Post

CSS Box Shadows

Posted
By haoxiqiang
1 min read

Directional Box Shadows

Top
Right
Bottom
Left
1
2
3
4
5
6
7
8
9
10
11
12

.drop-shadow.top {
  box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.right {
  box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.bottom {
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.left {
  box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

Emphesized Box Shadows

Dark
Light
Inset
Border
1
2
3
4
5
6
7
8
9
10
11
12

.emphasize-dark {
  box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.emphasize-light {
  box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.emphasize-inset {
  box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.emphasize-border {
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}

Gradients

Light Linear
Dark Linear
Light Radial
Dark Radial
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

.gradient-light-linear {
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
    background-image: -webkit-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -o-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}

Rounded Borders

Light
Heavy
Full
Barrel
1
2
3
4
5
6
7
8
9
10
11
12

.light-rounded {
  border-radius: 3px;
}
.heavy-rounded {
  border-radius: 8px;
}
.full-rounded {
  border-radius: 50%;
}
.barrel-rounded {
    border-radius: 20px/60px;
}

Embossed Box Shadows

Light
Heavy
1
2
3
4
5
6
7
8
9
10
11

.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.3), 
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

引用
BasicReadyToUseCSSStyles

blog
css
This post is licensed under CC BY 4.0 by the author.