Tools

Get dotted, grid, striped or geometric patterns as pure CSS backgrounds.

Draw rings and grids of dots that recall a speaker grille.

Build colourful repeating patterns from geometric shapes, or bring in your own.

Turn a shape or picture into a pattern that repeats without a visible seam.

Make calm backgrounds from a blurred spot of colour on a plain ground.

Build linear, radial or conic gradients with smooth transitions and effects.

Make fluid backgrounds from fields of colour that melt into each other.

Draw one soft, organic shape and fill it with colour, a gradient, a picture or a pattern.

Draw one flat shape, tune its corners and outline, and take it as editable SVG.

Draw layered or line waves for section dividers and backgrounds.

Generate palettes, lock the colours you like and fine-tune shades and contrast.

Motif's own palettes: filter by colour, style and topic, open in the studio. 292 palettes

Pull a picture's main colours into a palette and copy them in the format you need.

Turn base colours into light-to-dark steps and take them straight into your code.

Turn a picture into retro dithered pixels or ASCII art.

Turn a picture into halftone dots, like an old printed page.

Add fine grain over a picture for a textured, film-like look.

Build soft, layered backgrounds by stacking blobs on top of each other.

Draw placeholder line and bar charts to drop into interface mock-ups.

Make festive backgrounds of scattered paper strips that tile without a seam.

Draw perspective grids running to the horizon, with a neon glow if you like.

Paint starry night skies, with the Milky Way if you like; the stars twinkle in video.

Make backgrounds of vertical stripes that brighten from the edges to the centre.

Convert between SVG, CSS, data URIs and images; paste or drop in what you have.