Soft mesh gradients for app backgrounds
The blurred, multi-point gradient — pioneered by Stripe and now everywhere in SaaS — is just a few colored blooms melted together. This tool composes that look from three colors you control, with the blur and spread that make it feel like light rather than a flat fill.
Crank Blur for that hazy, out-of-focus glow, widen Spread to let the colors bleed into each other, and swap the three swatches to match a product palette or a mood.
Getting a good result
- Choose three colors — two close in hue plus one accent usually reads best.
- Raise Blur until the color edges dissolve into a smooth wash.
- Adjust Spread so the blooms overlap rather than sit apart.
- Export PNG for a hero background, or SVG if you want it editable in code.
What it's good for
- product and SaaS hero backgrounds
- pitch-deck and slide backdrops
- brand moodboards and color studies
- app splash and onboarding screens
FAQ
Why does it look banded on my screen?
Mesh gradients can show banding on 8-bit displays. Add a touch of the Grain Texture on top — a little noise hides the bands and is exactly how production gradients are finished.
Can I match my brand's exact colors?
Yes — set all three swatches directly. For a calm result keep two of them in the same color family and use the third as a single accent.
PNG or SVG for a website hero?
PNG is simplest for a full-bleed hero. Use SVG if you want to recolor or animate the blooms later in code.
Related tools
These tools work well alongside it.