Skip to content
FreeKitX

Mesh Gradient Generator

Bookmark this tool

Save this page in your browser

On a phone, choose Add Bookmark from your browser’s Share or menu.

Generate fluid multi-point mesh gradients with draggable color points, seeded PRNG mutations, pure CSS declarations, and 4K PNG exports.

Mesh Gradient & Fluid Wallpaper Generator

Free · Local Processing

Create smooth mesh gradients with draggable control points, seeded mutations, and 4K PNG exports.

Live Gradient Canvas
Interactive Canvas

Drag points or use arrow keys / sliders to reposition. Focus a point and press arrow keys to nudge.

1
2
3
4

Design Presets

Mesh Gradient Controls

Customize seed, control points, blur, and background color in real time.

Point Count: 4 / 6

Minimum 4 control points required.

#2beeb3
#0f172a
50 px
px

Adjust blur intensity for softer transitions between color points.

Advanced Settings

Use a numeric seed to deterministically reproduce the same gradient.

Selected Point: point-1
21 %
%
34 %
%

Export & Download

CSS Variant

Standard background declarations without filter blur. Safe for any element.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

Related tools

Direct answer

A mesh gradient is a modern visual effect that blends multiple radial color points across a two-dimensional surface, creating organic, multi-hued fluid transitions without rigid linear boundaries.

How to use this tool

1

Position Color Points & Pick Palettes

Drag 4 to 6 control points across the canvas or choose a design preset to define primary color nodes.

2

Tune Softness & Seeded PRNG

Adjust blur radius for softer color transitions, or enter a numeric seed to deterministically reproduce a composition.

3

Copy CSS or Export Wallpaper

Copy lightweight background declarations, grab isolated complete CSS rules, or download high-resolution PNGs up to 4K.

CSS Mesh Gradient Implementation: Background-Only vs Complete CSS

Browser-native mesh gradients are rendered by stacking multiple radial-gradient() layers over a solid base color. The Background-only mode provides pure background declarations without element filters, making it safe for any layout without affecting nested elements. The Complete CSS mode applies a blur filter to an isolated ::before pseudo-element with an overscan margin, ensuring child text, links, and buttons stay sharp and clickable without blur bleed.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Background-only: Lightweight layered radial gradients with zero element-level blur; completely safe for inline elements.
  • Complete CSS: Isolated ::before pseudo-element with filter blur; child elements retain pointer events and sharp text.
  • Deterministic Seed: Mulberry32 PRNG algorithm reproduces identical spatial coordinates and color distributions.

Frequently asked questions

How do pure CSS mesh gradients work without images?

They combine multiple CSS radial-gradient() declarations with transparent color stops over a solid background color. The browser's graphics engine interpolates the overlapping transparent edges into smooth fluid transitions.

What is the difference between Background-only and Complete CSS modes?

Background-only outputs standard background properties without filters, ensuring complete safety for any HTML container. Complete CSS uses a blurred ::before pseudo-element with proper stacking contexts, allowing softer diffused meshes while keeping child text and buttons crisp.

What are the performance considerations and browser limitations?

Layering many radial gradients with large blur filters can increase repaint overhead during rapid scrolling on mobile devices with low-power GPUs. Exporting 4K PNG wallpapers rasterizes locally and may take a brief moment on low-memory hardware.

Are gradient calculations and wallpapers processed on a remote server?

No. All gradient math, PRNG seed evaluation, CSS serialization, and HTML5 Canvas rasterization run entirely client-side in your browser.

Authoritative References & Standards