Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

The Gradient tool in Paint by Zaweba, explained

Linear, radial, spiral, along a path and freeform gradients in Paint by Zaweba, with OKLab blending, dither and handles that stay live on canvas.

The Gradient tool in Paint by Zaweba, explained

Gradients turn up everywhere in design work: skies, backgrounds, lighting effects, buttons, vignettes, the shading on a shape. The Gradient tool in Paint by Zaweba (shortcut G) covers far more than the usual linear and radial pair, and it stays live on the canvas until you are happy, so you can adjust instead of redrawing.

The gradient types

Linear runs in a straight line, the standard for skies and backgrounds. Radial spreads in circles from a centre, good for glows and spotlights. Angle sweeps round a centre like a clock hand. Reflected mirrors a linear gradient either side of the starting line, handy for metal tubes and bands of light. Diamond spreads in a diamond shape for highlights and gems.

Then there are the less common types. Elliptical is radial stretched into an ellipse, useful for vignettes on non-square images. Square spreads outward in squares. Arc follows a curve, either along the band or across it, for rainbows and curved light. Spiral winds outward from the centre. Along a path makes the colour follow a path you have drawn, so a ribbon or a road can change colour along its length. Freeform points let you place colours anywhere on the canvas and blend between them, which suits soft backgrounds and painted skies.

Options that change the look

Spread runs from 5 to 1000 percent and controls how stretched the gradient is between its handles. Offset shifts the colours along the gradient without moving the handles.

Pad, Repeat and Mirror decide what happens beyond the ends. Pad holds the end colours. Repeat starts the gradient again, giving stripes. Mirror bounces back and forth, giving smooth bands.

Linear or Smooth blending changes how colours ease between stops. Smooth avoids the visible kinks you sometimes see at stops in a multi-colour gradient.

Colour space is either RGB or perceptual (OKLab). RGB blending can create dull or greyish midpoints between some colours, such as blue to yellow. OKLab blends the way the eye sees, so the middle looks as bright and lively as the ends. For most design work, perceptual is the better choice.

Reverse flips the order, dither adds a tiny amount of noise to prevent banding, and opacity and blend mode control how the gradient sits on what is already there.

Live handles

When you drag out a gradient, it stays live with handles on the canvas. Drag the handles to move the start, end and centre, change options in the options bar and watch the result update. Press Enter to apply it, or Esc to cancel. That makes trying several looks quick, and you never have to undo and redraw.

Avoiding banding

Smooth, subtle gradients over a large area, like a dark blue sky, can show visible steps, especially at 8-bit. Turning on dither breaks the steps up with noise that is invisible at normal size. Working in a 16-bit document helps too, because there are many more shades to blend through.

Where gradients go next

Gradients in Paint by Zaweba are shared across the app: shapes, text, the Paint Bucket and Layer Art effects all use the same gradients, so a colour scheme you build once is available everywhere. The gradient editor and Gradients panel are where you make and store them, including multi-colour gradients with opacity stops and the noise gradients that produce random colour bands.

For flexible work, put the gradient on its own layer, so you can change blend mode and opacity later. With a mask on top, a gradient becomes a soft transition between two images, a graduated filter on a sky, or a fade to transparency at the edge of a photo.

A good habit is to drag the gradient, adjust it live for a few seconds, then press Enter. It is far faster than trying to get it right in one drag.