<div class="gp-card">
  <div class="gp-preview" id="gpPreview"></div>
  <div class="gp-bar" id="gpBar">
    <div class="gp-stops" id="gpStops"></div>
  </div>
  <div class="gp-row">
    <label class="gp-angle">Angle <strong id="gpAngVal">90°</strong>
      <input type="range" id="gpAngle" min="0" max="360" value="90">
    </label>
    <input type="color" id="gpColor" value="#6366f1" aria-label="Stop color">
    <button type="button" class="gp-del" id="gpDel" title="Delete stop">Delete</button>
  </div>
  <code class="gp-css" id="gpCss"></code>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:32px 18px}

.gp-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:16px;width:100%;max-width:380px}
.gp-preview{height:120px;border-radius:12px;border:1px solid #334155;margin-bottom:14px}
.gp-bar{position:relative;height:26px;border-radius:7px;margin-bottom:14px;cursor:copy;border:1px solid #334155;background-image:linear-gradient(45deg,#334155 25%,transparent 25%),linear-gradient(-45deg,#334155 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#334155 75%),linear-gradient(-45deg,transparent 75%,#334155 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.gp-stops{position:absolute;inset:0;border-radius:6px}
.gp-stop{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.gp-stop.is-sel{outline:2px solid #fff;outline-offset:2px}
.gp-stop:active{cursor:grabbing}

.gp-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gp-angle{flex:1;font-size:11.5px;font-weight:700;color:#94a3b8;display:flex;flex-direction:column;gap:4px}
.gp-angle strong{color:#e2e8f0}
.gp-angle input{accent-color:#6366f1}
.gp-row input[type=color]{width:34px;height:30px;border:none;background:none;padding:0;cursor:pointer}
.gp-del{background:#0f172a;border:1px solid #334155;color:#f87171;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.gp-del:hover{border-color:#ef4444}

.gp-css{display:block;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:9px 12px;font-family:ui-monospace,monospace;font-size:11px;color:#7dd3fc;cursor:pointer;word-break:break-all;line-height:1.5}

var stops = [ { pos:0, color:'#6366f1' }, { pos:100, color:'#22d3ee' } ];
var angle = 90, selected = 0;
var bar = document.getElementById('gpBar');
var stopsWrap = document.getElementById('gpStops');
var preview = document.getElementById('gpPreview');
var cssEl = document.getElementById('gpCss');
var colorInput = document.getElementById('gpColor');
var angleInput = document.getElementById('gpAngle');
var angleVal = document.getElementById('gpAngVal');

function cssGradient(forBar) {
  var sorted = stops.slice().sort(function (a, b) { return a.pos - b.pos; });
  var list = sorted.map(function (s) { return s.color + ' ' + Math.round(s.pos) + '%'; }).join(', ');
  return 'linear-gradient(' + (forBar ? '90deg' : angle + 'deg') + ', ' + list + ')';
}

function render() {
  preview.style.background = cssGradient(false);
  stopsWrap.style.background = cssGradient(true);
  stopsWrap.innerHTML = '';
  stops.forEach(function (s, i) {
    var el = document.createElement('div');
    el.className = 'gp-stop' + (i === selected ? ' is-sel' : '');
    el.style.left = s.pos + '%';
    el.style.background = s.color;
    el.addEventListener('pointerdown', function (e) { e.stopPropagation(); selected = i; colorInput.value = s.color; drag(i, e); render(); });
    stopsWrap.appendChild(el);
  });
  cssEl.textContent = 'background: ' + cssGradient(false) + ';';
  colorInput.value = stops[selected].color;
}

function posFromX(clientX) {
  var r = bar.getBoundingClientRect();
  return Math.max(0, Math.min(100, (clientX - r.left) / r.width * 100));
}
function drag(i, startEvt) {
  function mv(e) { stops[i].pos = posFromX(e.clientX); render(); }
  function up() { document.removeEventListener('pointermove', mv); document.removeEventListener('pointerup', up); }
  document.addEventListener('pointermove', mv);
  document.addEventListener('pointerup', up);
}

bar.addEventListener('click', function (e) {
  if (e.target.classList.contains('gp-stop')) return;
  stops.push({ pos: posFromX(e.clientX), color: stops[selected].color });
  selected = stops.length - 1;
  render();
});
colorInput.addEventListener('input', function () { stops[selected].color = colorInput.value; render(); });
angleInput.addEventListener('input', function () { angle = parseInt(angleInput.value, 10); angleVal.textContent = angle + '\u00b0'; render(); });
document.getElementById('gpDel').addEventListener('click', function () { if (stops.length > 2) { stops.splice(selected, 1); selected = 0; render(); } });
cssEl.addEventListener('click', function () { navigator.clipboard && navigator.clipboard.writeText(cssEl.textContent); });

render();