Gradient Picker

<div class="nuda-gpick">
  <div class="nuda-gpick__canvas">
    <span class="nuda-gpick__handle" style="left:30%;top:40%"></span>
  </div>
  <div class="nuda-gpick__hue">
    <span class="nuda-gpick__hueThumb" style="left:55%"></span>
  </div>
</div>

.nuda-gpick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 200px;
}

.nuda-gpick__canvas {
  position: relative;
  height: 120px;
  border-radius: 8px;
  background: linear-gradient(to right,#fafafa,#9d6dff),linear-gradient(to bottom,transparent,#09090b);
  background-blend-mode: multiply;
  cursor: crosshair;
}

.nuda-gpick__handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #fafafa;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4),0 0 6px rgba(0,0,0,.6);
  cursor: grab;
  transition: transform .2s;
}

.nuda-gpick__handle:hover {
  transform: translate(-50%,-50%) scale(1.2);
}

.nuda-gpick__hue {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg,#ff5e7a,#ffb45e,#e4ff54,#6ee7b7,#62b6ff,#9d6dff,#ff6dd4,#ff5e7a);
  cursor: pointer;
}

.nuda-gpick__hueThumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid #0c0c10;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.5);
  transition: transform .2s;
}

.nuda-gpick__hueThumb:hover {
  transform: translate(-50%,-50%) scale(1.15);
}