Gradients·free · no signup

Mesh Gradient

Generate modern multi-point mesh gradients and copy the CSS. Tweak the point count and reshuffle until it sings.

CSS

mesh.css

background-color: #7C5CFF;
background-image:
  radial-gradient(at 63% 24%, #7C5CFF 0px, transparent 55%),
  radial-gradient(at 22% 64%, #F0407A 0px, transparent 55%),
  radial-gradient(at 84% 48%, #CBF969 0px, transparent 55%),
  radial-gradient(at 20% 75%, #5CEADC 0px, transparent 55%);

How to use the Mesh Gradient

A mesh gradient is built by layering several radial gradients at different positions so their colors bleed into one another, creating a smooth multi-color field with no hard edges. The tool places these color points across the canvas and stacks them with CSS, so the exported code is plain background layers any browser can render.

1
Set your colors
Choose the colors for the mesh points, or generate a random combination.
2
Adjust the blend
Reposition or recolor points until the soft transitions look the way you want.
3
Export the CSS
Copy the generated background CSS and drop it onto a section, hero or card.

Frequently asked

What is a mesh gradient?

It is a gradient made from multiple color points blended together, producing a soft, organic multi-color background rather than a simple two-color fade.

Is a mesh gradient pure CSS?

The exported version layers several radial gradients via CSS backgrounds, so it works without images or JavaScript in modern browsers.

How is this different from the standard gradient generator?

The gradient generator makes single linear, radial or conic gradients along stops; the mesh tool blends many color points for a richer, ambient look.

Where are mesh gradients used?

They are popular for hero sections, app backgrounds, cards and illustrations where a soft, modern wash of color is wanted.

More gradients

CSS Gradient Generator

Create linear, radial and conic gradients visually and copy the CSS, Tailwind or SVG output.

Gradient Palette

Sample an even palette of stops along any gradient.