<div class="gradient-1"></div>
<div class="gradient-2"></div>
<div class="gradient-3"></div>
<div class="gradient-4"></div>
<div class="gradient-5"></div>
<div class="gradient-6"></div>
<div class="gradient-7"></div>
<div class="gradient-8"></div>
html, body {
	height: 100%;
	width: 100%;
}

body {
	display: flex;
	margin: 0;
	background-color: #222;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
}

[class^="gradient"] {
	--box-dim: 20vw;
	height: var(--box-dim);
	width: var(--box-dim);
	margin: calc(var(--box-dim) / 10);
	background-color: #c0ffee;
	box-shadow:
		0 .5em 2em -1em rgba(0,0,0,.75);
	border-radius: 2px;
	
	/* ABOVE: presentation styles
	   BELOW: gradient-specific styles */

	--r: 255;
	--g: 255;
	--b: 255;
	background-image: linear-gradient(
		30deg, #decaff, rgba(var(--r),
		var(--g), var(--b), 0));
}

.gradient-2,
.gradient-5,
.gradient-6,
.gradient-8 {
	--r: 0;
}

.gradient-4,
.gradient-5,
.gradient-7,
.gradient-8 {
	--g: 0;
}

.gradient-3,
.gradient-6,
.gradient-7,
.gradient-8 {
	--b: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.