Design Atlas
한국어
◐ Color

Gradient mesh palette

그라데이션 메시 팔레트

Several colors scattered as soft blobs and blended together — instead of one direction, many hues drift and merge like fog.

Also known as: Mesh gradient메시 그라디언트
···
html
<div class="wrap">
  <canvas id="cv" width="480" height="220"></canvas>
  <div class="sws" id="sws"></div>
</div>
css
.wrap{width:min(480px,94%);display:grid;gap:8px}
canvas{width:100%;height:auto;aspect-ratio:16/8;border-radius:16px;border:1px solid var(--line);display:block}
.sws{display:flex;gap:6px;justify-content:center}
.sws div{display:grid;gap:3px;justify-items:center}
.sws i{display:block;width:clamp(16px,4vmin,22px);height:clamp(16px,4vmin,22px);border-radius:6px;border:1px solid var(--line)}
.sws b{font:700 clamp(6px,1.6vmin,8px)/1 ui-monospace,monospace;color:var(--muted)}
js
var PALETTES = [
  ['#5b5bf7', '#f25c8a', '#18c29c', '#facc15'],
  ['#f97316', '#ec4899', '#8b5cf6', '#22d3ee'],
  ['#0ea5e9', '#a3e635', '#f43f5e', '#fbbf24'],
];
var idx = 0;
var cv = document.getElementById('cv'), ctx = cv.getContext('2d');
var W = cv.width, H = cv.height;
var sws = document.getElementById('sws');
function layout() {
  sws.innerHTML = PALETTES[idx].map(function (h, i) { return '<div><i id="s' + i + '"></i><b>' + h + '</b></div>'; }).join('');
}
layout();
var t = 0;
function pos(i, n) {
  var a = t * 0.4 + i * (Math.PI * 2 / n);
  return [W * (0.5 + 0.34 * Math.cos(a)), H * (0.5 + 0.34 * Math.sin(a * 1.3))];
}
function draw() {
  ctx.clearRect(0, 0, W, H);
  ctx.filter = 'blur(46px)';
  var colors = PALETTES[idx];
  colors.forEach(function (hex, i) {
    var p = pos(i, colors.length);
    var r = W * 0.5;
    var g = ctx.createRadialGradient(p[0], p[1], 0, p[0], p[1], r);
    g.addColorStop(0, hex);
    g.addColorStop(1, 'transparent');
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(p[0], p[1], r, 0, Math.PI * 2);
    ctx.fill();
  });
}
(function tick() {
  t += 0.01;
  draw();
  requestAnimationFrame(tick);
})();
setInterval(function () { idx = (idx + 1) % PALETTES.length; layout(); }, 3400);

A linear or radial gradient blends two or three colors in a single direction. A mesh gradient instead drops a color at several points on a canvas and blurs each one heavily so they overlap — the result has no single direction, just color drifting and pooling like fog.

The implementation is simpler than it looks: draw a radial-gradient (solid color fading to transparent) at each point, then blur the whole canvas to erase the hard edges. Slowly moving each point's position over time makes the background feel alive.

Because it is computed fresh instead of exported as a static image, the same code can produce endless different backgrounds just by swapping the color set. It fits anywhere that needs to feel alive without stealing attention — hero section backgrounds, loading screens.

When to use

Use it for hero backgrounds or loading screens that need life without competing for attention. If text sits on top, check contrast carefully.