Shader Atlas
한국어
◐ Gradients & backgrounds

Mesh Gradient

메시 그라디언트

Soft color swaths drift across the canvas, with their seams wrapping through the palette.

Also known as: MeshGradientGradient mesh

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, MeshGradient } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <MeshGradient />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, MeshGradient } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <MeshGradient/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, MeshGradient } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <MeshGradient />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, MeshGradient } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <MeshGradient />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'MeshGradient',
    }
  ]
}, { disableTelemetry: true })

Props · MeshGradient

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorAColor A#1a0533—First gradient color (two-color fallback when stops are cleared)
colorBColor B#ffdf8e—Second gradient color (two-color fallback when stops are cleared)
stopsColorsSet in code[{"color":"#1a0533","position":0},{"color":"#6d2fd1","pos…—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
countPoints52 – 8 (step 1)Number of color points scattered across the canvas
smoothnessSmoothness20 – 5 (step 0.01)How smoothly the color points blend into each other
variationVariation0.350 – 1 (step 0.01)Varies edge softness across the canvas — some color boundaries crisp, others diffuse
swirlSwirl0.3-1 – 1 (step 0.01)Vortex rotation that spirals the field around the frame centre — negative values spin the other way
driftDrift0.50 – 1 (step 0.01)How far the color points wander from their home positions
wrappingWrapping00 – 1 (step 0.01)Wraps the palette back through itself where colors meet — banded seams where the field pinches, smooth elsewhere
speedSpeed10 – 10 (step 0.1)Animation speed
seedSeed00 – 100 (step 1)Random seed for the point layout and palette assignment

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Multi Point Gradient다중 포인트 그라디언트

Five individually placed color points blend together by proximity.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Flowing Gradient흐르는 그라디언트

A liquid-silk gradient with organic, flowing color bands.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Aurora오로라

Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Color Wheel색상환 그라디언트

A directional gradient that cycles through rainbow colors or a custom set of three colors.

Like pigment spreading across wet paper, several color swaths blend without hard seams and drift slowly. It suits a screen that needs an organic color flow rather than a static field.

`stops` sets the palette (five colors by default), and `count` sets how many color points are scattered across the canvas (default 5, range 2–8). Increasing `smoothness` blends those points more softly (default 2, range 0–5). More `drift` lets the points wander farther from their home positions (default 0.5, range 0–1), while more `speed` makes the movement faster (default 1, range 0–10).

This generator needs no input beneath it. Its motion can keep drawing attention, so reduce movement and contrast behind text; it is easier to read beneath a short heading or across a large background area.

When to use

Use it to animate a brand hero, add soft color to a card or cover, or bring a static field to life. Avoid it behind dense small text or in motion-sensitive contexts unless you keep the movement subtle.

Open as page ↗