<input id="radial-1" value="100" type="range" min="-50" max="150">
<div>
  <input id="radial-2" value="100" type="range" min="-50" max="150" style="-webkit-appearance: slider-vertical;transform: rotate(.5turn);" orient="vertical">
  <div class="demo"></div>
  <input id="radial-3" value="0" type="range" min="-50" max="150" style="-webkit-appearance: slider-vertical; transform: rotate(.5turn);" orient="vertical">
</div>
<input id="radial-4" value="0" type="range" min="-50" max="150">
.demo {
  inline-size: 75vmin;
  block-size: 75vmin;
  border-radius: 1ch;
  
  --cyanHSL: 180 100% 50%;
  --pinkHSL: 328 100% 54%;
  
  background-color: rebeccapurple;
  background-image: 
    radial-gradient(
      circle at var(--radial-1, 100%) var(--radial-3, 0%), 
      hsl(var(--cyanHSL)), hsl(var(--cyanHSL) / 0%)
    ),
    radial-gradient(
      circle at var(--radial-4, 0%) var(--radial-2, 100%), 
      hsl(var(--pinkHSL)), hsl(var(--pinkHSL) / 0%)
    )
  ; 
}

div {
  display: grid;
  grid: 1fr / min-content 1fr min-content;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
}
document
  .querySelectorAll('input')
  .forEach(input => {
    input.addEventListener('input', e =>
      document.body.style.setProperty(
        '--'+e.target.id, 
        e.target.value + '%'
      ))
  })
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.