Shadow
:where(html) {
--simple-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.10);
--simple-shadow-0: none;
--simple-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.09);
--simple-shadow-2: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
--simple-shadow-3: 0 4px 6px 0 rgba(0, 0, 0, 0.07);
--simple-shadow-4: 0 6px 8px 0 rgba(0, 0, 0, 0.06);
--simple-shadow-5: 0 8px 12px 0 rgba(0, 0, 0, 0.05);
--simple-shadow-6: 0 10px 16px 0 rgba(0, 0, 0, 0.05);
--simple-shadow-7: 0 12px 20px 0 rgba(0, 0, 0, 0.06);
--simple-shadow-8: 0 15px 30px 0 rgba(0, 0, 0, 0.07);
--simple-shadow-9: 0 20px 50px 0 rgba(0, 0, 0, 0.08);
--simple-shadow-10: 0 22px 60px 0 rgba(0, 0, 0, 0.10);
--shadow:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.77),
1px 2px 2px -2px hsl(0 0% 50% / 0.58),
5px 10px 10.1px -4px hsl(0 0% 50% / 0.39);
--shadow-0: none;
--shadow-1:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.83),
1px 2px 2px -4px hsl(0 0% 50% / 0.52);
--shadow-2:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.77),
1px 2px 2px -2px hsl(0 0% 50% / 0.58),
2px 7px 7px -4px hsl(0 0% 50% / 0.39);
--shadow-3:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.77),
1px 2px 2px -2px hsl(0 0% 50% / 0.58),
3px 8px 8px -4px hsl(0 0% 50% / 0.39);
--shadow-4:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.77),
1px 2px 2px -2px hsl(0 0% 50% / 0.58),
4px 9px 9px -4px hsl(0 0% 50% / 0.39);
--shadow-5:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.77),
1px 2px 2px -2px hsl(0 0% 50% / 0.58),
5px 10px 10.1px -4px hsl(0 0% 50% / 0.39);
--shadow-6:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.86),
1.3px 2.7px 2.7px -1px hsl(0 0% 50% / 0.73),
4px 7px 7px -3px hsl(0 0% 50% / 0.47),
8px 15px 15px -4px hsl(0 0% 50% / 0.34);
--shadow-7:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.86),
1.3px 2.7px 2.7px -1px hsl(0 0% 50% / 0.73),
6px 10px 10px -3px hsl(0 0% 50% / 0.47),
12px 20px 20px -4px hsl(0 0% 50% / 0.34);
--shadow-8:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.86),
1.3px 2.7px 2.7px -1px hsl(0 0% 50% / 0.73),
7px 12px 12px -3px hsl(0 0% 50% / 0.47),
15px 30px 30px -4px hsl(0 0% 50% / 0.34);
--shadow-9:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.86),
1.3px 2.7px 2.7px -1px hsl(0 0% 50% / 0.73),
4.3px 8.5px 8.6px -2px hsl(0 0% 50% / 0.6),
8px 18px 18px -3px hsl(0 0% 50% / 0.47),
20px 40px 40px -4px hsl(0 0% 50% / 0.34);
--shadow-10:
0.3px 0.5px 0.5px hsl(0 0% 50% / 0.86),
1.3px 2.7px 2.7px -1px hsl(0 0% 50% / 0.73),
4.3px 8.5px 8.6px -2px hsl(0 0% 50% / 0.6),
11.4px 22.8px 22.9px -3px hsl(0 0% 50% / 0.47),
25px 50px 50.3px -4px hsl(0 0% 50% / 0.34);
}
← Previous
Border