Mesh Gradient
also known ascolor mesh · gradient mesh · blob gradient
A gradient generated by blending multiple colored points across a 2D surface, creating soft organic color washes.
A mesh gradient interpolates color across a grid of control points, producing soft, organic transitions impossible with linear or radial gradients. Each point pulls color in its surrounding region, and the regions blend smoothly where they meet.
In web work, mesh gradients are usually faked with stacked radial gradients or generated as static SVG/PNG (Tools like Mesh by FreshGradients, or Photoshop's mesh gradient tool). They're the signature backdrop for glassmorphic UIs because glass needs colorful refraction to read as glass.
- Backdrops behind glass UI
- Hero sections needing soft organic color
- Brand backgrounds where flat color would feel sterile
- Anywhere text sits directly on top — contrast becomes unreliable
- +Keep colors in the same temperature family (all cool, all warm)
- +Limit to 3–5 control points — more becomes muddy
- −Don't combine high-contrast complementary colors — you'll get muddy mid-tones
Textbook examples in the directory
The design.md house style — Source Serif 4 with blue italic accent words, soft pastel mesh background (peach, lavender, mint), translucent glass panes with hairline borders, and a single deep editorial blue pill CTA.
Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type.
A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface.
People also ask
What is a mesh gradient?
A gradient created by blending three or more colored points across a 2D mesh, producing soft organic blobs of color rather than a single linear transition.
How are mesh gradients different from linear gradients?
Linear gradients move from one color to another along a straight axis. Mesh gradients blend multiple color points across a surface, producing painterly, irregular fields.
Are mesh gradients still in style?
Yes — when used with restraint and a tonal palette. Avoid the saturated peach-pink-purple meshes that dominated 2021; modern usage favors muted, controlled color.
How do I render a mesh gradient performantly?
Bake it into a static image or SVG when possible. Live CSS or canvas mesh rendering is GPU-expensive and often janky on low-end devices.