Gradients built as
a field of colour not a line of stops

Put colour points on the canvas and move them, bend a mesh, or start from aurora, liquid, metal or holographic fields. Add flow, grain, dither and halftone, and save at the real size of the job — pixels for a screen, millimetres for print. 完全免费。 真的免费。

Open GradienterHow it works
A freeform mesh gradient with grain, made in Gradienter
Points, meshes and fields.
Freeform colour points, a bendable mesh grid, and seventeen engines from linear to plasma.
Blended properly.
Mixed in OKLab, OKLCH or linear light — no muddy middles.
Print-sized.
Millimetres and PPI, with bleed, up to tens of megapixels.
Grain, dither, halftone.
Film grain, blue-noise dither, CMYK rosettes and posterizing.
Seed and lock.
Randomize colours, positions or sizes, lock the rest, keep the seed.
Nothing uploaded.
Everything is drawn in your browser.

What it makes

One tool for every kind of gradient

Each engine, distortion and effect is a set of numbers you can move — and every preset is one of them.

Seventeen engines

Colour as a field

  • Freeform points and a bendable mesh
  • Linear, radial, conic, diamond and box
  • Aurora, blobs, Voronoi, clouds, plasma, contours
  • Rays, bands, metal and holographic
Open in
On the canvas

Shaped by hand

  • Click to add a colour, drag to move
  • Scroll or pull a ring to change its reach
  • Drag mesh points into curves
  • Centres, angles and radii as handles
Open in
Distortions

Bend the plane

  • Turbulence and curling flow
  • Swirl and waves
  • Mirror, quarter and kaleidoscope
  • A stack you can reorder
Open in
Print effects

Grain, dots and steps

  • Film, Gaussian and uniform grain
  • Halftone in one ink or CMYK rosettes
  • Posterize, pixelate, dither
  • Gradient map and colour adjust
Open in
Exploring

Seeds, locks and variations

  • Randomize colours, positions or sizes
  • Lock what you like
  • Mutate, or pick from twelve variations
  • Undo everything
Open in
The file

At the real size

  • PNG, JPEG, WebP, transparent
  • Up to 4× the canvas
  • Several screen sizes at once
  • CSS where CSS can say it
Open in

In detail

Canvas, colour, flow, texture and file

Every control the tool has.

01

Canvas

  • Pixels, millimetres, centimetres or inches
  • 72 to 600 PPI, with bleed
  • Screen, social, phone and paper presets
  • Transparent or coloured background
02

Colour

  • Stops with position and opacity
  • OKLab, OKLCH, linear, sRGB and HSL blending
  • Palettes from one colour, from pasted hex codes or from a photo
  • Brand colours kept in your browser
03

Distort and effects

  • Turbulence, flow, swirl, wave, symmetry, pixel grid
  • Blur, smear, zoom, grain, halftone, posterize
  • Chromatic aberration, gradient map, colour adjust
  • Vignette, keep-clear area for text, dither
04

Working and saving

  • Artwork overlay, safe area and layout preview
  • Randomize with locks, mutate, variations, undo
  • PNG, JPEG, WebP up to 4×, batch of screen sizes
  • CSS for linear, radial, conic and point gradients

How it works

Four steps

From a blank canvas to a file at the size of the job.

1

Set the canvas

Pick a screen size or a paper size with PPI and bleed.

2

Shape the colour

Pick an engine or a preset and move its points and handles.

3

Add texture

Distort the field and stack effects: grain, halftone, dither.

4

Save

PNG, JPEG or WebP at full size, or several sizes at once.

Where it is used

Backgrounds for everything

Wherever a flat colour is too little and a photo too much.

Packaging

Print-sized gradient grounds with grain and bleed.

Posters

Halftone and riso-style gradients for print.

Brand

Backgrounds generated only within your brand colours.

Video and stories

Story and screen sizes from one composition.

Print

Dithered, banding-free gradients at 300 PPI.

Web

Hero backgrounds, with CSS where it fits.

Questions

Before you start

Make a gradient

Free, in your browser, at the real size of the job.

Open GradienterVisit BoxLab