Popcorn Editor
Documentation Algorithmic design

Algorithmic design

Color and gradients

beginner advanced

Last updated Sep 24, 2026

A gradient in most apps blends two colors in a straight line through sRGB, which is why blue to yellow turns grey in the middle. The color examples go further: blends that keep their color, gradients made of flat inks for print, whole palettes from one color, and gradients that run across several objects at once. Open them from Menu ▸ Algorithmic design (the last part of the menu).

Color and gradients

Example What it makes Try
Blend spaces The same two colors blended five ways, top to bottom: sRGB, linear light, OKLab, OKLCH and like paint. Blue and yellow: grey in sRGB, green in OKLCH and when mixed like paint.
Aurora Glowing curtains that fade upward over a freeform night sky. More Curtains, and a warmer Edge color.
Mesh gradient A grid of colors from one harmony, gently stirred. Change the Scheme, or raise Stir for more movement.
Dithered sunset A sky and a low sun in a few flat inks, dithered like an old print. diffusion for a softer grain, Round dots for a halftone feel.
Halftone fade Two dot screens at different angles that overprint like a duotone. Try the line dot for an engraving look.
Contour bands A noise landscape as flat bands of color, like a relief map. Set Hue path to longer for a rainbow of bands.
Grainy gradient A soft gradient with fine light and dark grain on top. Lower Amount for a subtle texture.
Sunburst Hard-edged rays from a conic gradient, and a glowing sun. Fewer Rays for a bold retro poster.
Palette harmonies Swatch cards from one base color, each with a dot in whichever of black or white reads on it, and one blend of them all. Try each Scheme with your brand color.

Color on the selection

These change the objects you select.

Example What it does
One gradient across One blend that runs on across every selected object, as if they were cut from one sheet.
Harmonize colors Recolors the selection from a palette of one base color, keeping how light or dark each object was.
Aurora fill Gives every selected object its own freeform gradient.
Dithered texture Fills selected text or shapes with a dithered, halftoned or stippled gradient.

Soft 3D shapes in 3D in color shows smooth shading: every face of a 3D solid gets its own gradient, so balls and rings look smooth instead of stepped.

Two kinds of gradient

  • Editor gradients: linear, radial, conic, mesh and freeform. They stay real gradients: after Apply you can select an object and edit its gradient like any other, including on the canvas. OKLCH, paint-like and eased blends are kept as extra color stops, up to 32. In PDF export they are drawn as images, like every gradient in Popcorn.
  • Vector gradients: dither, halftone, bands and stipple. They are made of flat shapes in a few inks, so they print exactly and stay vector in PDF, and each ink is one object. In a CMYK document every ink gets CMYK values.

Tips

  • Pick the blend by its purpose. OKLab for calm, even blends; OKLCH for vivid ones that go round the color wheel; pigment when two paints should mix into a third color.
  • One gradient across objects keeps going over the gaps between them, so objects spaced apart show separate parts of the blend.
  • Readable text on color: the dots in Palette harmonies show which of black or white reaches a contrast of 4.5, the usual minimum for body text.
  • Grain and stipple can get heavy. When Apply stays off, raise the grain or spacing size.

Writing your own

const sunset = gradient(['#2b1055', '#ff5f6d', '#ffc371'], { space: 'oklch' });
rect(0, 0, artboard.width, artboard.height, { fill: linear(sunset, 90) });
halftone((x, y) => y / artboard.height, { cell: mm(3), ink: '#2b1055' });
  • gradient(colors, {space, hue, ease}) makes a color ramp. Call it with a number from 0 to 1, sample it with .colors(n), or cut it into hard bands with .steps(n).
  • linear, radial, conic, mesh and freeform turn a ramp into a fill. Give linear two points to lay it across the page, or an angle to span each shape on its own.
  • dither, halftone, bands and stipple draw any function of x and y (from 0 to 1) as flat shapes; within: selection[0] keeps them inside a selected shape or text.
  • harmony, contrast, readable and toOklch help with palettes and legibility.
  • In a 3D scene, material({ smooth: true }) shades with gradients.

The Code tab lists every option, and Ask AI knows them too.

All results →