<form id="app">
  <strong>Layered Gradient Playground</strong>
  <label>
    <strong>Hue 1</strong>
    <input type="range" max="360" name="--hue1" value="40" data-suffix="">
  </label>
  <label>
    <strong>Hue 2</strong>
    <input type="range" max="360" name="--hue2" value="189" data-suffix="">
  </label>
  <label>
    <strong>Hue 3</strong>
    <input type="range" max="360" name="--hue4" value="330" data-suffix="">
  </label>
  <label>
    <strong>Hue 4</strong>
    <input type="range" max="360" name="--hue4" value="270" data-suffix="">
  </label>
  <label>
    <strong>Saturation</strong>
    <input type="range" name="--saturation" value="100" data-suffix="%">
  </label>
  <label>
    <strong>Light</strong>
    <input type="range" name="--light" value="45" data-suffix="%">
  </label>
  <label>
    <strong>Angle 1</strong>
    <input type="range" max="360" name="--angle1" value="100" data-suffix="deg">
  </label>
  <label>
    <strong>Angle 2</strong>
    <input type="range" max="360" name="--angle2" value="270" data-suffix="deg">
  </label>
  <a href="https://twitter.com/argyleink/status/1233406753892515847">Thanks to Adam Argyle</a>
</form>

<code id="code"></code>
* {
  box-sizing: border-box;
}
html {
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}
body {
  --angle1: 100deg;
  --angle2: 270deg;
  --hue1: 40;
  --hue2: 189;
  --hue3: 330;
  --hue4: 270;
  --light: 45%;
  --saturation: 100%;

  background-image:
    linear-gradient(var(--angle1), hsl(var(--hue1), var(--saturation), var(--light)), hsl(var(--hue2), 100%, var(--light)));
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
          mask-image: linear-gradient(to bottom, transparent, black);
  background: linear-gradient(var(--angle2), hsl(var(--hue3), var(--saturation), var(--light)), hsl(var(--hue4), calc(var(--saturation) - 5%), calc(var(--light) - 10%)));	
}
a {
  font-size: small;
}
code {
  background-color: #1E1E1E;
  color: #CE9178;
  font-size: x-small;
  inset-block-end: 0;
  padding: 2ch;
  position: fixed;
  width: calc(100% - 10rem);
}
form {
  background: rgba(255, 255, 255, .5);
  height: 100%;
  inset-inline-end: 0;
  padding: 1ch;
  position: fixed;
  width: 10rem;
}
input {
  display: block;
  width: 100%;
}
label {
  display: block;
  font-size: 80%;
  margin-block: 1.5ch;
}
app.addEventListener('input', (e) => {
  const input = e.target;
  document.body.style.setProperty(input.name, input.value + input.dataset.suffix);
  code.innerText = `body { background-image: ${window.getComputedStyle(document.body).backgroundImage}; }
  body::before { background-image: ${window.getComputedStyle(document.body, ':before').backgroundImage}; }`;
});
app.dispatchEvent(new Event('input'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.