<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.