box shadow classes

Solutions on MaxInterview for box shadow classes by the best coders in the world

showing results for - "box shadow classes"
Alan
09 Jun 2017
1/*** 
2BOX-SHADOW CLASSES
3Quickly apply multi-layered box shadows.
4***/
5
6.shadow {
7	box-shadow:
8  		0 4px 4px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
9  		0 13px 13px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
10  		0 40px 60px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08)
11}
12
13.shadow--l {
14	box-shadow:
15  		0 2.7px 3.6px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .04),
16  		0 7.5px 10px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .06),
17  		0 18px 24.1px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
18	  	0 60px 80px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
19}
20
21.shadow--xl {
22	box-shadow:
23  		0 2.2px 2.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.01),
24  		0 5.3px 6.7px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.02),
25  		0 10px 12.5px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
26	  	0 17.9px 22.3px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
27		0 33.4px 41.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
28	  	0 80px 100px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
29}
similar questions
queries leading to this page
box shadow classes