How do I make a mesh gradient in CSS?

Set a background-color, then stack several radial-gradient layers in background-image. Each layer is one colour point placed with at x% y% that fades to transparent. This generator writes that CSS for you; drag the points and copy the code.

Can I use a mesh gradient in Tailwind?

Yes. In Tailwind v4, paste the @utility block from the Tailwind tab into your main CSS file and add the bg-mesh class to your hero. You can also use an arbitrary value class with the radial gradients inline, without grain.

How do I add grain to a gradient?

Add a noise layer on top of the gradient. This tool uses a small inline SVG with an feTurbulence filter as the first background layer, so the grain needs no extra file. Move the grain slider to set its strength; 8 to 15% is usually enough.

Why does my gradient show banding?

Banding appears when a soft gradient spreads over a large area and the screen has too few colour steps to show it smoothly, so you see stripes. Add light grain, use colours that are closer together, or give the points more spread.

Are mesh gradients bad for performance?

No, not as CSS. Radial gradients are cheap for the browser to paint and add only a few hundred bytes. Large blurred background images and animated blur filters cost more, so avoid those for the same effect.

Is it free for commercial use?

Yes. The gradients you make here are yours to use in any project, commercial or not, with no attribution and no sign-up. Everything is made in your browser.

All free tools

Mesh gradient generator: CSS, Tailwind, PNG

Build a soft mesh gradient from 3 to 6 colour points, add grain, and see it behind a real hero section with a contrast check. Copy the CSS or the Tailwind v4 utility, or download a PNG or SVG. Everything runs in your browser.

Presets

Base

#F3F6FC

From my brand colour

Points (4 of 6)

Point 1 colour
Point 1 spread62%
Point 2 colour
Point 2 spread58%
Point 3 colour
Point 3 spread64%
Point 4 colour
Point 4 spread56%

Grain12%

A little noise hides banding in soft gradients. 8 to 15% is usually enough.

Preview

New: snap any section

Launch your SaaS page today

Swap sections, keep your copy, and publish in minutes.

Start freeSee demo

Hero text #0B0B12 on the average background #B3BAD6: 10.1 : 1 passes AA (4.5 : 1)

.mesh-gradient {
  background-color: #f3f6fc;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"),
    radial-gradient(56% 56% at 18% 86%, #da9b81 0%, transparent 100%),
    radial-gradient(64% 64% at 78% 88%, #867cdf 0%, transparent 100%),
    radial-gradient(58% 58% at 88% 12%, #7cd5df 0%, transparent 100%),
    radial-gradient(62% 62% at 12% 18%, #7ca0df 0%, transparent 100%);
}

Image size

The CSS is a few hundred bytes. A PNG of the same gradient, with grain, can weigh hundreds of kilobytes, so use the image only where CSS cannot go.

How to use it

01Pick a preset, or type your brand colour and build a matching set.
02Drag the colour points on the preview, or select one and move it with the arrow keys.
03Set the spread of each point, the grain and a light or dark base.
04Check the contrast ratio of the hero text under the preview.
05Copy the CSS or Tailwind code, or download the PNG or SVG.

What is a mesh gradient?

A mesh gradient is a background made of several soft colour points that blend into each other. A linear gradient moves in one direction from colour to colour; a mesh gradient spreads colour from many points, so it looks more like light than like a stripe.

In CSS, a mesh gradient is a stack of radial gradients on one element. Each radial gradient is one colour point that fades to transparent, and the background colour shows through where no point reaches. No image file is needed.

What colours do SaaS homepages use?

About 6 in 10 SaaS homepages (60.7% of 201) have no clear accent colour: they are black, white and grey. Of the 39.3% that do, blue leads by far with 44.3% of accents, then violet and orange.

44% of the 200 hero sections we checked use a dark background. A dark mesh gradient fits that style; a light, pastel mesh suits the monochrome majority, because it adds colour without a strong brand hue.

Method: for each site, the accent is the most-used clearly coloured screen colour (saturation at least 35%, lightness between 20% and 85%, at least 0.5% of the captured pixels). The presets above are seeded with real accents from this data.

Accent hue of the 79 SaaS homepages (of 201) that have a clear accent colour.
Accent hue	Share of sites with an accent	Sites
Blue	44.3%	35
Violet	11.4%	9
Orange	10.1%	8
Yellow	8.9%	7
Teal	8.9%	7
Green	7.6%	6
Pink	6.3%	5
Red	2.5%	2

As of October 2026 · Source: BlockSnap crawl of SaaS homepages (screen colours measured from full-page captures)

How to use a mesh gradient on a SaaS landing page

Put the mesh gradient behind the hero only. One soft background at the top sets the mood; the same effect on every section makes the page loud and hides the content.

Keep the hero text readable: aim for a contrast ratio of at least 4.5 to 1 between the text and the background behind it. Place the brightest points away from the headline, or switch to a dark base with white text.

Add a little grain. Smooth gradients over large areas can show visible steps of colour, called banding; fine noise breaks up those steps. Keep the file small: the CSS output is a few hundred bytes, while a full-width PNG of the same gradient can weigh hundreds of kilobytes.

CSS vs PNG vs SVG: which should you use?

Use CSS on your website. It is the smallest option, it scales to every screen size and you can change a colour in one line.

Use the PNG where CSS cannot go: social images, slides, email headers, app store art or design tools. Choose 1920 x 1080 for a full-screen background or 1200 x 630 for an Open Graph share image.

Use the SVG when you need a vector file that scales without blur, for example in Figma or in print. It keeps the same points and grain, and it stays small, but very large SVG filters can be slower to draw than CSS.

Questions

How do I make a mesh gradient in CSS?: Set a background-color, then stack several radial-gradient layers in background-image. Each layer is one colour point placed with at x% y% that fades to transparent. This generator writes that CSS for you; drag the points and copy the code.
Can I use a mesh gradient in Tailwind?: Yes. In Tailwind v4, paste the @utility block from the Tailwind tab into your main CSS file and add the bg-mesh class to your hero. You can also use an arbitrary value class with the radial gradients inline, without grain.
How do I add grain to a gradient?: Add a noise layer on top of the gradient. This tool uses a small inline SVG with an feTurbulence filter as the first background layer, so the grain needs no extra file. Move the grain slider to set its strength; 8 to 15% is usually enough.
Why does my gradient show banding?: Banding appears when a soft gradient spreads over a large area and the screen has too few colour steps to show it smoothly, so you see stripes. Add light grain, use colours that are closer together, or give the points more spread.
Are mesh gradients bad for performance?: No, not as CSS. Radial gradients are cheap for the browser to paint and add only a few hundred bytes. Large blurred background images and animated blur filters cost more, so avoid those for the same effect.
Is it free for commercial use?: Yes. The gradients you make here are yours to use in any project, commercial or not, with no attribution and no sign-up. Everything is made in your browser.

Put this gradient behind a full landing page

BlockSnap builds your SaaS landing page from proven sections. Snap each section to a new style, keep your copy, and publish in minutes.

Get early access