Skip to main content
floow.designfloow.design

Mesh Gradient Generator

Generate soft multi-point mesh gradients and export them as CSS, native code or a phone-sized image.

Generate freeFree to export CSS, native code and PNGNo sign-upNo watermarkRuns in your browser
Palettes
background-color: #6366f1;
background-image:
    radial-gradient(at 62% 34%, #6366f1 0px, transparent 60%),
    radial-gradient(at 61% 90%, #22d3ee 0px, transparent 60%),
    radial-gradient(at 64% 64%, #a855f7 0px, transparent 60%),
    radial-gradient(at 24% 81%, #ec4899 0px, transparent 60%);

Mesh gradients blend several colour points across a surface instead of running along one axis, producing the soft, organic backgrounds that have become a staple of onboarding screens and hero sections.

Move the points, change the palette, or randomise until something works.

How a mesh gradient differs from a linear one

A linear or radial gradient interpolates between stops along one path. A mesh places several colour points across a two-dimensional surface and blends between all of them at once, so the result has no obvious direction. That is what makes it read as atmospheric rather than graphic — and also why it is much harder to reproduce faithfully in pure CSS.

Keep it behind, not in front

A mesh gradient is a backdrop. The moment it competes with your content for attention it stops helping — the usual failure is too much saturation behind text that then needs a scrim to stay readable. Desaturate, reduce the contrast between points, and let the interface sit on top comfortably.

Export as an image for large areas

Reproducing a true mesh in CSS means stacking several large blurred radial gradients, which is expensive to composite on a mid-range phone and can cost you frames while scrolling. For a full-screen background, export a PNG and let the GPU draw one bitmap.

How to use the mesh gradient generator

  1. Pick a palette, then set how many colour points to blend — four is usually plenty.
  2. Raise the softness until the individual points stop being identifiable as circles.
  3. Randomise to reshuffle the point positions until the composition works.
  4. Check it behind real text — if you need a scrim to read the copy, desaturate the mesh instead.
  5. Download the PNG and use it as a static background rather than recreating it in CSS.

Use it with

  • Gradient Generator — Build linear, radial and conic gradients with as many stops as you need, then export to CSS, SwiftUI, Compose, React Native or Flutter.
  • Blob Generator — Generate organic blob shapes as SVG, PNG, CSS border-radius or a native SwiftUI and Compose path.
  • Splash Screen Generator — Generate launch screens at every iOS and Android size in light and dark, with the Flutter and Expo config.

Frequently asked questions

What is a mesh gradient?
A background that blends several colour points across a two-dimensional surface rather than along a single axis, producing a soft, directionless wash. It is the effect behind most modern onboarding and hero backgrounds.
Should I use a PNG or CSS for a mesh gradient?
A PNG for anything full-screen. Reproducing a true mesh in CSS means stacking several large blurred radial gradients, which is expensive to composite on a mid-range phone and can cost you scroll frames.
Can I use these gradients commercially?
Yes. The output is yours to use with no watermark, no attribution and no licence restrictions.

Related tools