Parallel Studio
See Deltaproof
Back to blog
6 min readParallel Studio

CSS Mesh Gradient Background: How to Make One (Free Generator)

mesh gradientcssgradient backgroundwebflowframertailwindfree tool

A mesh gradient is a background where several colors glow from different spots and melt into each other. It's the soft, organic look on landing pages and app icons. This post shows how to build one in plain CSS, and how to drop it into Webflow, Framer, WordPress, Shopify, React or plain HTML.

If you'd rather not write it by hand, the free mesh gradient generator outputs the CSS for you. It's what the examples below are based on.

What a mesh gradient is

A linear gradient goes from color A to color B along one line. A mesh gradient lets three, four or five colors each spread out from their own point.

CSS has no mesh gradient property. The usual trick is to stack several radial-gradient() layers on top of a background-color. Each layer starts at one color and fades to transparent, so the layers show through each other. It isn't a true mesh, but it reads as one.

The CSS technique

There are three parts:

  1. A base color that fills the gaps between the points.
  2. One radial-gradient per color point. Each is a circle placed at an x/y position, with the color at the center and transparent at some radius.
  3. Optional grain, an SVG noise layer on top.

Here's a warm four-point example, the same shape the generator outputs:

.mesh {
  background-color: #f3e9dc;
  background-image:
    radial-gradient(circle at 18% 22%, #e8794a 0%, transparent 58%),
    radial-gradient(circle at 78% 16%, #f2c46d 0%, transparent 58%),
    radial-gradient(circle at 70% 82%, #b5532f 0%, transparent 58%),
    radial-gradient(circle at 20% 80%, #7fa88e 0%, transparent 58%);
}

A few things to know:

  • The first layer paints on top. Reorder the lines to change which color wins where they overlap.
  • The percentage after transparent is how far each color reaches. It's measured against the farthest-corner radius, which is the default size for a circle. A bigger number means a softer, more blended mesh. A smaller one gives distinct blobs. The generator's Softness slider maps to this value, from 30% at 0 up to 80% at 100. The example above is the default softness of 55, which gives 58%.
  • The at 18% 22% part is the point's position, across and down.

Add grain to avoid banding

Smooth gradients can show visible bands, especially on dark colors or large screens. A little noise breaks that up. Add an SVG noise layer as the first entry in background-image:

.mesh-grain {
  background-color: #f3e9dc;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(circle at 18% 22%, #e8794a 0%, transparent 58%),
    radial-gradient(circle at 78% 16%, #f2c46d 0%, transparent 58%),
    radial-gradient(circle at 70% 82%, #b5532f 0%, transparent 58%),
    radial-gradient(circle at 20% 80%, #7fa88e 0%, transparent 58%);
}

The %23 is an encoded #. It's needed so the filter='url(#n)' reference survives inside a data URL. The grain is a tiled 200px grey noise at low opacity, so it's subtle. It adds no network request.

Use the generator

Writing the percentages by hand gets fiddly. The free generator does it visually:

  1. Pick a starter palette or hit Randomize.
  2. Drag the color points around the preview. With a keyboard, focus a point and use the arrow keys.
  3. Set 3 to 6 colors, and edit any color by hex or with the picker. Change the base color too.
  4. Adjust Softness and toggle the film grain overlay.
  5. Copy the CSS or the Tailwind class, or download a PNG.
  6. Copy link gives you a URL that restores the same gradient, handy for sharing with a client.

Everything runs in your browser. Nothing is uploaded, and there's no sign-up.

CSS or PNG?

  • CSS is resolution-independent, tiny, and easy to edit later. Use it for page and section backgrounds.
  • PNG is a fixed image. The generator downloads 1920×1080 for a wide hero or wallpaper, and 1000×1500 for Pinterest-style pins. Use it where you can't set CSS, such as social graphics, slides or an image fill.

The PNG is drawn on a canvas with the same colors and positions, so it matches closely. Grain is random, so each download differs a little.

Plain HTML

Paste the rule into your stylesheet and add the class:

<section class="mesh" style="min-height: 70vh">
  <h1>Your headline</h1>
</section>

Webflow

Give the section a class, then add an Embed element with a <style> block that targets it. Or set a single gradient from Style → Backgrounds, and use the embed for the full stack. More on the Webflow effects page.

Framer

Apply the declarations with a code override or Custom CSS in Site Settings, or use a Fill on a frame for a simpler gradient. See Framer effects.

WordPress and Shopify

  • WordPress: give a Group block an Additional CSS class, then paste the rule under Appearance → Customize → Additional CSS.
  • Shopify: paste the rule into base.css, or into a section's {% style %} block, and add the class to the section.

React and Tailwind

Paste the lines into a style object or a CSS file. Or use the generator's Tailwind output, which uses arbitrary values with underscores in place of spaces:

<div class="bg-[#f3e9dc] bg-[image:radial-gradient(circle_at_18%_22%,#e8794a_0%,transparent_58%),radial-gradient(circle_at_78%_16%,#f2c46d_0%,transparent_58%),radial-gradient(circle_at_70%_82%,#b5532f_0%,transparent_58%),radial-gradient(circle_at_20%_80%,#7fa88e_0%,transparent_58%)]">
  <h1>Your headline</h1>
</div>

Performance and accessibility

  • Static CSS is cheap. It's a few lines of text, with no script, no image request and no animation loop. The grain layer is an inline SVG.
  • Check text contrast. A mesh has light and dark areas, so test your headline over the brightest and darkest spots, not just the average. If a point sits behind the text, move it, or darken the base.
  • It's decorative. Keep real text in HTML, not in a PNG.
  • Start from a tested palette. The generator's Ember, Ocean, Mint and Forest starters are a good place to begin.

When you need it to move

This technique is static. Plain CSS has no simple way to animate gradient stops, so a mesh like this stays still.

For a moving gradient, Shader Gradients draws it on the GPU from a single script tag. The step-by-step is in Animated Shader Gradient Backgrounds in Framer or Webflow. If a still background is enough, stay with CSS.

See it in context

The free mesh gradient generator lets you try palettes and see the CSS change as you drag. For the animated version and the rest of the catalog, see /effects.

Pricing

The generator is free. Shader Gradients, the animated WebGL version, is $12 one-time. The full catalog is available through the All-Access Pass for $49.

Start with a starter palette, check your headline contrast, and keep the CSS if a still background does the job.