Mesh Gradient Generator
Generate soft multi-point mesh gradients and export them as an image.
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
- Pick a palette, then set how many colour points to blend — four is usually plenty.
- Raise the softness until the individual points stop being identifiable as circles.
- Randomise to reshuffle the point positions until the composition works.
- Check it behind real text — if you need a scrim to read the copy, desaturate the mesh instead.
- Download the PNG and use it as a static background rather than recreating it in CSS.
Use it with
- Gradient Generator — Build linear and radial CSS gradients with as many stops as you need, and copy the code.
- Blob Generator — Generate organic blob shapes as SVG, for backgrounds, masks and decorative fills.
- Splash Screen Generator — Generate launch screen assets at every iOS and Android size from one logo.
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
- Flexbox GeneratorBuild a flex layout visually and copy the CSS, with a live preview that shows what each property does.
- CSS Grid GeneratorLay out rows, columns and gaps visually, place items on the grid, and copy the CSS.
- Gradient GeneratorBuild linear and radial CSS gradients with as many stops as you need, and copy the code.