Mesh Gradient Generator

A mesh gradient is a smooth blend of colours arranged across a 2D grid of control points. Each point contributes its colour to the surrounding canvas, and the engine fills the space between points by interpolating colour values along a mesh of curves. The result is a soft, multi-directional colour field that feels dimensional in a way a single linear or radial gradient cannot match.

The technique came out of vector design tools, most famously Adobe Illustrator and Sketch, where designers used mesh gradients to draw photorealistic surfaces without using raster paint tools. By the early 2020s the look had crossed into web and product design: Stripe, Linear, Vercel, and most modern SaaS landing pages now use mesh-gradient backgrounds for hero sections because they suggest depth, polish, and motion at zero JavaScript cost.

On the web, mesh gradients are usually pre-rendered as PNG or JPG images, because the CSS spec does not yet support true mesh gradients natively. The Gradients.design mesh editor lets you design the gradient interactively and then export the result in whichever format your project needs: a raster image, a React component that renders the gradient at runtime, or a stack of radial-gradient layers in CSS that approximate the mesh closely enough for most use cases.

Mesh gradients work best where you want a background to feel warm, polished, and slightly alive without using illustration, photography, or video. Five common situations:

• Hero sections. The most common use. A soft mesh behind your headline gives depth without competing for attention.
• App splash screens. iOS and Android splash screens benefit from a single PNG that compresses well and works at any device resolution.
• Pricing pages. A mesh behind plan cards focuses the eye while suggesting premium quality.
• Social cards. 1200×630 OG images render well as mesh gradients because they read as branded but not too busy at small sizes.
• Slide deck covers. Designers use mesh gradients on section dividers in Keynote, Figma, and Canva decks.

Avoid mesh gradients where the background needs to communicate specific information (charts, screenshots, illustrations) or where users will spend long periods reading on top of it. Heavy mesh gradients can reduce contrast and make body copy harder to scan.

The Gradients.design mesh editor renders the gradient live in WebGL while you edit, so feedback is instant. You do not need a Photoshop or Figma file. Four steps:

1. Open the mesh editor. Go to the free mesh gradient generator. The canvas opens with a default 4-point preset so you have something to edit immediately.
2. Drag colour points. Each coloured dot on the canvas is a control point. Click and drag a point to push its colour into a new region of the gradient.
3. Pick new colours. Click any control point to open the colour picker. Pick by hex, RGB, HSL, OKLCH, or sample from one of the 10,000+ palette presets.
4. Export your gradient. Open the export panel. Copy CSS for instant use, grab a React component, download a PNG up to 8K, or render an MP4 video.

The full editor includes warp effects (magnify, ripple, spiral), visual effects (grain, halftone, vignette), animation controls, and a colour-space picker (sRGB, HSL, OKLCH, OKLAB) for finer colour control on paid plans. Free users can use the editor without any signup; saving to the cloud requires a free account.

Because true mesh gradients are not yet supported in the CSS spec, the most reliable way to render them on the web is to stack multiple radial-gradient layers. The exports below are the kind of code the studio produces; each example is hand-tuned to look closer to a true mesh than a plain linear gradient.

Simple 4-point mesh, warm tones

background:
  radial-gradient(at 20% 30%, #ff7e5f 0%, transparent 50%),
  radial-gradient(at 80% 20%, #feb47b 0%, transparent 50%),
  radial-gradient(at 70% 80%, #ffafbd 0%, transparent 50%),
  radial-gradient(at 30% 70%, #ffc3a0 0%, transparent 50%),
  #ff7e5f;

Cool aurora mesh, dark background

background:
  radial-gradient(at 25% 30%, #0ea5e9 0%, transparent 55%),
  radial-gradient(at 75% 25%, #8b5cf6 0%, transparent 55%),
  radial-gradient(at 80% 75%, #14b8a6 0%, transparent 55%),
  radial-gradient(at 20% 80%, #6366f1 0%, transparent 55%),
  #0f172a;

Tailwind CSS via arbitrary values

<div class="min-h-screen
  bg-[radial-gradient(at_20%_30%,#ff7e5f_0%,transparent_50%),radial-gradient(at_80%_20%,#feb47b_0%,transparent_50%),#ff7e5f]">
  Your content here
</div>

React component with TypeScript

import { CSSProperties } from 'react'

const meshStyle: CSSProperties = {
  background: `
    radial-gradient(at 20% 30%, #ff7e5f 0%, transparent 50%),
    radial-gradient(at 80% 20%, #feb47b 0%, transparent 50%),
    radial-gradient(at 70% 80%, #ffafbd 0%, transparent 50%),
    radial-gradient(at 30% 70%, #ffc3a0 0%, transparent 50%),
    #ff7e5f
  `,
  minHeight: '100vh',
}

export function MeshHero({ children }: { children: React.ReactNode }) {
  return <section style={meshStyle}>{children}</section>
}

For pixel-accurate output (where the radial-gradient approximation falls short, usually with more than 6 colour points), export a PNG instead and use it as a CSS background-image. The studio supports PNG at up to 8K so the gradient stays sharp on retina displays and ultra-wide monitors.

Mesh gradients sit between two extremes: simple linear gradients and full volumetric 3D surfaces. Picking the right tool depends on what you want the background to do.

If your design needs movement, look at animated gradients or capture an MP4 from the studio. If you want a more sculpted look (light catching a 3D surface), the 3D gradient generator renders real WebGL surfaces.

CSS multiple-background radial-gradients (the technique behind the CSS export) are supported in every modern browser, including Chrome, Edge, Firefox, Safari (desktop and iOS), and Android WebView. The oldest version with reliable support is Chrome 26 (2013), Firefox 16 (2012), and Safari 6.1 (2013). If you support Internet Explorer 11 you will need to fall back to a single linear gradient or a PNG; mesh approximations do not render in IE.

The native CSS mesh-gradient function, part of the CSS Images Module Level 4 draft, is still experimental in 2026. Track its progress on caniuse.com under "mesh-gradient". When it ships, mesh gradients will become trivially writable in CSS without the radial-gradient stacking technique. Until then, the radial-gradient layer approach is the most compatible option.

Mesh gradients have a reputation for being expensive, but the truth depends on how they are implemented.

• CSS radial-gradient layers: cheap. The browser composites them on the GPU. Adds essentially zero load time and zero CPU.
• Pre-rendered PNG: cheap on render, costs only the network download. A well-compressed 1920×1080 mesh PNG is around 80 to 200 KB.
• Live WebGL mesh: more expensive. Costs a few hundred KB of shader code on first load and runs at 60 fps on most devices, but adds JavaScript to the critical path. Use this only when the user needs to interact with the gradient (an editor) or you need the gradient to animate live.

For Largest Contentful Paint (LCP), the recommended approach is the PNG export: serve a small WebP version inline as a data URL for the first paint, then upgrade to the high-resolution version as needed. The Gradients.design PNG export is optimised for compression so a 2K hero mesh typically lands under 250 KB.

Mesh gradients sit behind content, so the main accessibility concern is contrast. WCAG 2.2 requires a minimum 4.5:1 contrast ratio between body text and the background it sits on. With a multi-colour mesh, the background colour varies, so test contrast at the brightest and darkest regions of the gradient.

Two practical fixes if contrast is borderline:

• Add a semi-transparent dark overlay behind the text (a flat black at 30 to 50 percent opacity usually fixes contrast without making the gradient feel muted).
• Constrain the mesh palette. Mesh gradients made entirely of darker tones (or entirely of light tones) keep contrast predictable.

For users on prefers-reduced-motion: reduce, never animate the mesh. If you use the studio's animation feature, also export a static fallback and switch between them using a media query.

A short, non-exhaustive list of products using mesh gradients on production pages as of 2026:

• Stripe: the marketing site uses a soft animated mesh behind the hero on multiple landing pages.
• Linear: the issue-tracking app uses a tightly-controlled dark mesh on its homepage and pricing page.
• Vercel: product cards on the Vercel marketing site use mesh gradients to differentiate plan tiers.
• Anthropic: brand identity surfaces (the Claude product launch pages) use mesh gradients with a deliberately limited palette.
• Figma: the templates marketplace surfaces several brand kits that ship with mesh gradient assets baked in.

Five recurring mistakes that make a mesh gradient look amateurish:

1. Too many colours. More than 6 to 8 control points starts to look muddy. Pick a tight palette of 3 to 5 related tones.
2. Pure black or pure white anchor points. Replace pure #000 or #FFF with a slightly tinted near-black or near-white. The result feels intentional rather than accidental.
3. Equal spacing. A perfectly symmetric mesh reads as generic. Bias control points off-grid for a more designed look.
4. High saturation everywhere. Use one saturated accent against muted neighbours. Saturation against saturation creates visual noise.
5. Forgetting contrast. Build the mesh, then test it with your real body copy on top. If the text is borderline at any point, dim the brightest region.