<div class="diamond">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

<input type="range" value="0" max="360" id="hue"> 

@import "https://unpkg.com/open-props/colors-oklch.min.css";

@layer diamond {
  .diamond {
    inline-size: 50vmin;
    aspect-ratio: 1;
  }
  
  .top {
    block-size: 25%;
    clip-path: polygon(26% 0%, 73% 0%, 100% 100%, 0% 100%);
    background: conic-gradient(
      from 270deg at bottom in oklab, 
      var(--color-9) 0%, 13%, var(--color-7) 0% 0%, 37%, var(--color-3) 0% 0%, 50%, oklch(80% 0.30 158 / 0%) 0% 0%
    );
  }
  
  .bottom {
    block-size: 75%;
    background: conic-gradient(
      from 326deg at bottom in oklab, 
      var(--color-5) 0%, 5%, var(--color-7) 0% 0%, 14%, var(--color-9) 0% 0%, 18.8%, transparent 0% 0%
    );
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
    accent-color: var(--color-bright);
  }

  html {
    block-size: 100%;
    background: var(--color-15);
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
  
  .swatches {
    display: grid;
    grid-template-columns: 50vmin;
    grid-template-rows: auto repeat(6, 5vmin);
    gap: 1vmin;
  }
  
  .swatch {
    border-radius: 3px;
  }
  
  .bright {
    background: var(--color-bright);
    aspect-ratio: 1;
    margin-block-end: 2vmin;
    border-radius: 5px;
  }
}

hue.oninput = e =>
  sheet.replaceSync(`* {--color-hue: ${e.target.value} }`, 0)

const sheet = new CSSStyleSheet()
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]