Free Online Mesh Gradient Generator

A mesh gradient generator blends four corner-anchored radial gradients in CSS to produce the soft painterly backgrounds used by Stripe, Linear and Apple marketing sites.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed
CSS
background-color: #0F172A;
background-image:
  radial-gradient(circle at 0% 0%, #FF80B5 0%, transparent 50%),
  radial-gradient(circle at 100% 0%, #9089FC 0%, transparent 50%),
  radial-gradient(circle at 0% 100%, #06B6D4 0%, transparent 50%),
  radial-gradient(circle at 100% 100%, #FDE68A 0%, transparent 50%);

How to Use This Tool

  1. Pick a Base color — usually a dark or neutral background.
  2. Pick the four corner colors: Top left, Top right, Bottom left, Bottom right.
  3. Or click Randomise for four fresh random colors.
  4. Click Copy CSS to copy the background-color and background-image declarations.

What Is a Mesh Gradient Generator?

True SVG mesh gradients are mathematically complex — they define color across a parametric quadrilateral mesh — but you can get most of the visual effect with four stacked CSS radial gradients. Each one is anchored to a corner (top-left, top-right, bottom-left, bottom-right), fades to transparent before reaching the center, and overlays a solid base color underneath. Where the four fades overlap, the colors blend smoothly into the organic painterly look.

Marketing designers use mesh gradients for hero sections and signup modals; brand designers use them as social-image backgrounds; product designers use them as ambient backdrops for empty states.

Click Randomise for four fresh seed colors when blank-page paralysis hits. Output is a `background-color` plus a multi-line `background-image` declaration that works in every current browser — no SVG, no images, no canvas rendering, just stacked CSS.

Frequently Asked Questions

What is a mesh gradient?
A multi-color gradient that blends in two dimensions rather than along a single axis — the soft, painterly backgrounds seen in modern apps like Stripe, Apple and Spotify.
How is it built in pure CSS?
By stacking several radial-gradient layers, each anchored to a different corner of the element, all composited on the same background. No SVG required.
Can I randomise it?
Yes — click 'Randomise' to get four new colors. Or set each corner manually with the color pickers.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Gradient Generator

Build linear, radial and conic CSS gradients with multiple color stops. Copy ready-to-use CSS in one click.

Glassmorphism Generator

Generate frosted-glass CSS with adjustable blur, opacity and border. Live preview plus copy-ready code.

CSS Pattern Generator

Generate CSS background patterns — dots, stripes, grids and diagonals — with custom colors and spacing.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.

Color Blender

Mix two colors with an adjustable ratio. Get the in-between color in RGB and hex with a live preview.