Tiny Online Tools
Mesh Gradients Rendered as Pure SVG
Mesh gradients — colorful, multi-point gradient backgrounds that feel like brushed paint — became iconic through Stripe and Linear's marketing pages. This generator produces the same effect as a tiny standalone SVG, sidestepping the need for an image file, WebGL, or canvas.
The Technique
Rather than using a native mesh gradient (which CSS and SVG don't fully support yet), the tool stacks multiple soft radial gradients. Each gradient fades from a chosen color at a specific (x, y) point outward into transparency. Stacked on top of a solid background, these radial pools bleed into each other, mimicking a hand-painted mesh.
The approach is extremely portable: the resulting SVG uses only standard <radialGradient> and <rect> elements — no filters, no scripts — so it works everywhere SVG is supported.
Controls
- Points — 2 to 6 color blobs. Each has its own color, X, and Y position slider.
- Softness — the radius of each radial gradient. Lower softness keeps colors tight and punchy; higher softness spreads them into subtle pastels.
- Background — solid fallback behind the blobs.
- Re-roll — randomize point positions for instant inspiration while keeping your palette.
Uses
- Hero backgrounds for modern SaaS
- App splash screens
- Podcast / music covers
- Product mockups and marketing banners
- Blog and docs site backgrounds
The SVG stretches to any container with preserveAspectRatio="none", so a single file can serve as a full-width background at any breakpoint. Combine with the Grainy Gradient or Noise Texture generators for a tactile, modern look.