Toolcroft

Color Tools

Mesh Gradient Generator - CSS Gradient Builder

Create beautiful mesh, conic, radial, and linear CSS gradients in your browser. Pick colors, adjust positions, and copy the generated CSS.

background-color: #6366f1;
background-image: radial-gradient(ellipse at 20% 20%, #6366f1aa 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #ec4899aa 0%, transparent 60%),
  radial-gradient(ellipse at 20% 80%, #f59e0baa 0%, transparent 60%),
  radial-gradient(ellipse at 80% 80%, #10b981aa 0%, transparent 60%);

What is a mesh gradient?

A mesh gradient is a multi-directional color blend where colors transition smoothly in two dimensions rather than in a straight line. Unlike CSS linear-gradient or radial-gradient, mesh gradients can have different colors in each corner and smoothly blend between all four (or more) control points simultaneously.

Browser support

CSS does not natively support mesh gradients (they exist in Figma, Sketch, and SVG mesh gradients). This generator creates a mesh gradient effect by layering multiple radial gradients with blend modes, or by generating an SVG with a <feMerge> filter. The output is a static image or CSS you can use as a background.

Design tips

  • Use analogous colors (adjacent on the color wheel) for subtle, harmonious gradients.
  • Use complementary colors (opposite on the wheel) for vibrant, high-contrast effects.
  • Low opacity center colors create a "glow" look popular in dark mode designs.

CSS implementation techniques

Because CSS has no native mesh gradient type, developers approximate the effect using one of two main approaches:

  • Stacked radial-gradients + mix-blend-mode: layer several radial-gradient backgrounds, each centered at a different corner or control point, and set mix-blend-mode: screen or multiply on each layer to let the colors blend together.
  • SVG feMerge / feBlend filter: define multiple SVG gradient primitives and blend them through an SVG filter chain. Produces smoother results in some browsers but is less editable in plain CSS.

True mesh gradients (with arbitrary control points) require a canvas-based renderer or a design tool like Figma, which supports them natively.

Design inspiration

Mesh gradients became a major design trend after Apple used them in macOS Sonoma (2023) wallpapers. Other notable adopters include Stripe's homepage (vibrant purple/blue/teal), Linear.app (cool neon mesh on dark backgrounds), and most generative AI landing pages (aurora-style blobs on near-black backgrounds). Common color strategies:

  • Warm-to-cool: coral/orange blending into violet/blue - creates energy and movement.
  • Earth tones: terracotta/sand/sage - organic, calm, popular in design portfolios.
  • Neon on dark: electric cyan/magenta/chartreuse on black - futuristic, high energy.