<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.