View Latest

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