Design a gradient visually and copy the CSS, including a plain sRGB fallback for browsers that do not understand modern color spaces.

A gradient

Pick linear, radial or conic, then set the angle or the center point.
Click the track to add a color stop, drag a handle to move it, double-click it to remove it.
Choose the blending space. Oklab and OKLCH avoid the gray middle that sRGB produces between opposite colors.
Copy the CSS. The fallback line appears automatically whenever you use a space older browsers cannot read.

A repeating pattern

Patterns are not a separate feature: they are ordinary gradients using three tricks together.

Hard edges. Tick “Hard edges between stops” and each color stops dead where the next begins instead of fading. Two stops become a stripe rather than a blend — this single switch is what separates a pattern from a gradient.
A tile size. Give the layer a tile width and height. The gradient then repeats at that size across the box instead of stretching once from edge to edge. Leave either at zero and the layer fills the whole area.
Layers. Press Add to stack another gradient. The first layer sits on top, and lower layers show through wherever the ones above are transparent — so a shape drawn in one layer needs a solid color beneath it to sit on. Use Bring forward and Send back to reorder, and the numbered buttons to choose which layer the controls below are editing.

Two worked examples. Dots: one radial layer, circle, closest side, hard edges, the second stop set to fully transparent at about 42%, tiled at 44 by 44 — then a plain color layer underneath. Checks: one conic layer with four hard stops at 0, 25, 50 and 75 per cent alternating between a color and transparent, tiled square, over a plain layer.

The nine entries in “Start from a pattern” build exactly these stacks for you. Load one, then take it apart: change a color, halve the tile size, add a third layer. Nothing is locked.

Tip: Already have a pattern? Paste the whole background-image declaration into the import box — each comma-separated gradient becomes its own editable layer.

Gradient generator

Gradient Generator — Azad University

Three things make a pattern.

Hard edges so a color stops dead instead of fading.
A tile size so it repeats instead of stretching once.
Layers stacked, with a solid one underneath.

Pick a pattern below to see all three set up, then take it apart.

1 · Start here

Start from a pattern

Patterns are ordinary CSS gradients stacked and tiled. Every one stays fully editable.

Layers, front to back

The top of this list is the front. Lower layers show through wherever the ones above are see-through, so a shape needs a solid layer beneath it.

2 · Shape of this layer

Kind

Repeat it across the box Hard edges between stops

Hard edges turn a gradient into stripes or checks: each color stops dead instead of blending.

3 · Tiling — turns it into a pattern

Tile width auto

Tile height auto

Tile offset across 0px

Tile offset down 0px

Tile size is measured in

How it repeats

Blend this layer with the ones below

Blending is what turns two plain layers into something neither one contains. Multiply over a color backing is the usual starting point.

Zero width or height means the layer fills the box. Give both a size and the layer tiles.

Angle 180°

0° runs upward, 90° to the right, 180° downward.

4 · Color blending

Blend the colors in

5 · Color stops

Selected stop

Color

Opacity 100%

Position 0%

6 · Import

Paste a gradient to edit it

Click the bar to add a stop, drag a handle to move it, double-click a handle to remove it.

2 stops

A gradient

A repeating pattern

Private by design

Browser compatibility

Gradient generator