그라데이션 종류

<div class="wrap">
  <div class="box" id="linearBox"><span>linear</span></div>
  <div class="box" id="radialBox"><span>radial</span></div>
  <div class="box" id="conicBox"><span>conic</span></div>
</div>

.wrap{display:flex;gap:clamp(10px,3vmin,20px);width:min(760px,96%);justify-content:center;flex-wrap:wrap}
.box{width:clamp(64px,28vmin,160px);height:clamp(64px,28vmin,160px);border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.box span{position:absolute;bottom:6px;left:6px;font:700 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.4);padding:3px 6px;border-radius:6px}

let angle = 0, t = 0;
const linearBox = document.getElementById('linearBox'), radialBox = document.getElementById('radialBox'), conicBox = document.getElementById('conicBox');

function render() {
  linearBox.style.background = 'linear-gradient(' + angle + 'deg, var(--accent), var(--accent-3))';
  const cx = 50 + 25 * Math.cos(t), cy = 50 + 25 * Math.sin(t);
  radialBox.style.background = 'radial-gradient(circle at ' + cx + '% ' + cy + '%, var(--accent-2), #1b1433)';
  conicBox.style.background = 'conic-gradient(from ' + angle + 'deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent))';
}
(function tick() {
  angle = (angle + 0.6) % 360;
  t += 0.02;
  render();
  requestAnimationFrame(tick);
})();