``````- let palettes = [
- 	'#28beae #6cdfdb #6c7d9c #287d9c',
- 	'#be28b9 #51239f #510062 #be008d',
- 	'#be5128 #ce9248 #e4c060 #db9c4e'
- ];
- let n = palettes.length;

mixin panel(c)
- let rel_rng = .65; // relative range, 65% of total
- let o = 50*(1 - rel_rng); // absolute offset
//- generate x, y coords between 0 & 100%, but not too close to either
- let x = Math.round(o + rel_rng*100*Math.random());
- let y = Math.round(o + rel_rng*100*Math.random());
//- we want b between 0 & 90 degrees, scale [0, 100] accordingly
- let b = Math.round(.9*(o + rel_rng*100*Math.random()));
//- we want a between 0 & 180 degrees, scale [0, 100] accordingly
- let a = Math.round(1.8*(o + rel_rng*100*Math.random()));
.panel(style=`--xy: \${x}% \${y}%;
--b: \${b}deg; --a: \${a}deg;
\${c.map((k, i) => `--c\${i}: \${k}`).join('; ')}`)

.grid
while n--
+panel(palettes[n].split(' '))

//- thanks
p
span.look Pretty palettes by
| .
|
span.code Clever code tricks by
| ,
a(href='https://css-tricks.com/author/thebabydino/' target='_blank') myself
|  and
a(href='https://www.patreon.com/anatudor' target='_blank') I
| !``````
``````/* =============== RELEVANT CODE =============== */
\$gap: 2vmin;

.panel {
background:
var(--c0) var(--a), var(--c1) 0% 50%,
var(--c2) 0% calc(180deg + var(--a)), var(--c3) 0%);

&:last-child { grid-column: 1/ span 2 }
}

/* =============== LAYOUT & PRETTiFYING CODE =============== */
/* (some pretty clever shit in there too) */
html { overflow-x: hidden }

body {
display: grid;
grid-template-rows: 1fr max-content;
margin: 0;
min-width: 160px; height: 100vh;
background: #363636;
font: 1.25em/ 1.5 segoe script, purisa, comic sans ms, cursive;

@media (max-width: 480px) { font-size: .875em }
}

.grid {
box-sizing: border-box;
display: grid;
grid-template:
minmax(65vmin, 65%) minmax(2em, 1fr)/
minmax(2em, 1fr) minmax(65vmin, 65%);
grid-gap: \$gap;
}

p {
margin: 0;
color: #eee;
text-align: center;
}

a {
--hlight: 0;
--not-hlight: calc(1 - var(--hlight));
--active: 0;
--not-active: calc(1 - var(--active));
position: relative;
display: inline-block;
color: gold;
text-decoration: none;

&::before {
position: absolute;
top: 1px; right: 0; bottom: 1px; left: 0;
transform-origin: 50% 100%;
transform: scaley(calc(var(--hlight) + var(--not-hlight)*.075));
background: currentcolor;
mix-blend-mode: difference;
transition:
transform .35s
cubic-bezier(calc(var(--hlight)*.42), 0, calc(var(--not-hlight)*.58), 1);
filter: hue-rotate(calc(var(--active)*-35deg));
content: ''
}

&:hover, &:focus { --hlight: 1 }
&:active { --active: 1 }
}``````
``````/*
used in this CSS-Tricks article