<details open>
<summary>Controls</summary>
<fieldset>
<label>
rotate
<input type="range" min="0" max="360" value="90" oninput="document.body.style.setProperty('--angle', `${this.value}deg`)" />
</label>
<label>
col1
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col1', `${this.value}%`)" />
</label>
<label>
col2
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col2', `${this.value}%`)" />
</label>
<label>
col3
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col3', `${this.value}%`)" />
</label>
<label>
col4
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col4', `${this.value}%`)" />
</label>
<label>
col5
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col5', `${this.value}%`)" />
</label>
<label>
col6
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col6', `${this.value}%`)" />
</label>
<label>
col7
<input type="range" min="0" max="20" value="0" oninput="document.body.style.setProperty('--col7', `${this.value}%`)" />
</label>
</fieldset>
</details>
html {
block-size: 100%;
inline-size: 100%;
}
body {
--angle: 90deg;
background:
linear-gradient(var(--angle),
hsl(9, 81%, 69%) calc(2% + var(--col1, 0%)),
hsl(10, 77%, 54%) 2% 4%,
hsl(358, 73%, 61%) 4% 6%,
hsl(359, 67%, 46%) 6% 8%,
hsl(356, 79%, 73%) 8% 10%,
hsl(351, 45%, 52%) 10% 12%,
hsl(11, 83%, 55%) 12% 14%,
transparent 14%),
linear-gradient(var(--angle),
hsl(39, 81%, 69%) calc(16% + var(--col2, 0%)),
hsl(40, 77%, 54%) 16% 18%,
hsl(28, 73%, 61%) 18% 20%,
hsl(29, 67%, 46%) 20% 22%,
hsl(26, 79%, 73%) 22% 24%,
hsl(21, 45%, 52%) 24% 26%,
hsl(41, 83%, 55%) 26% 28%,
transparent 28%),
linear-gradient(var(--angle),
hsl(99, 81%, 69%) calc(30% + var(--col3, 0%)),
hsl(100, 57%, 54%) 30% 32%,
hsl(88, 73%, 61%) 32% 34%,
hsl(89, 67%, 46%) 34% 36%,
hsl(86, 79%, 73%) 36% 38%,
hsl(81, 45%, 52%) 38% 40%,
hsl(101, 73%, 55%) 40% 42%,
transparent 42%),
linear-gradient(var(--angle),
hsl(159, 81%, 69%) calc(44% + var(--col4, 0%)),
hsl(160, 67%, 54%) 44% 46%,
hsl(148, 73%, 61%) 46% 48%,
hsl(149, 67%, 46%) 48% 50%,
hsl(146, 79%, 73%) 50% 52%,
hsl(141, 45%, 52%) 52% 54%,
hsl(161, 83%, 55%) 54% 56%,
transparent 56%),
linear-gradient(var(--angle),
hsl(219, 81%, 69%) calc(58% + var(--col5, 0%)),
hsl(220, 77%, 54%) 58% 60%,
hsl(218, 73%, 61%) 60% 62%,
hsl(219, 67%, 46%) 62% 64%,
hsl(216, 79%, 73%) 64% 66%,
hsl(201, 45%, 52%) 66% 68%,
hsl(221, 83%, 55%) 68% 70%,
transparent 70%),
linear-gradient(var(--angle),
hsl(279, 81%, 69%) calc(72% + var(--col6, 0%)),
hsl(280, 77%, 54%) 72% 74%,
hsl(278, 73%, 61%) 74% 76%,
hsl(279, 67%, 46%) 76% 78%,
hsl(276, 79%, 73%) 78% 80%,
hsl(261, 45%, 52%) 80% 82%,
hsl(281, 83%, 55%) 82% 84%,
transparent 84%),
linear-gradient(var(--angle),
hsl(309, 81%, 69%) calc(86% + var(--col7, 0%)),
hsl(310, 77%, 54%) 86% 88%,
hsl(308, 73%, 61%) 88% 90%,
hsl(299, 67%, 46%) 90% 92%,
hsl(296, 79%, 73%) 92% 94%,
hsl(291, 45%, 52%) 94% 96%,
hsl(321, 83%, 55%) 96% 98%,
transparent 98%),
linear-gradient(var(--angle),
hsl(341, 81%, 69%) 100%,
transparent 100%);
margin: unset;
min-block-size: 100%;
min-inline-size: 100%;
overflow: hidden;
}
details {
background-color: hsl(9, 10%, 95%);
font-family: ui-monospace, monospace;
font-size: small;
position: absolute;
right: 0;
width: 10rem;
}
fieldset {
border: unset;
margin: unset;
}
label, input {
display: block;
width: 100%;
}
summary {
cursor: pointer;
padding: 0.25rem 0.5rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.