Abstract background generator — layered shapes from one base colour

How to use the abstract background generator

1. Choose Shapes: Mixed, Circles, Blobs, Waves or Lines.
2. Pick a Base colour and a Colour harmony (Analogous, Complementary, Triadic or Monochrome).
3. Set Layers (1–30). Each layer is one shape.
4. Leave Background blank for a dark tint of your base colour, or type a hex code.
5. Set Width and Height (200–2,400 px), try a few Seed numbers, then download abstract-background.svg. The Palette swatches below show the five colours used.

What it does and when to use it

This tool is for quick, on-brand backgrounds: a desktop wallpaper, a webinar title slide, a social media banner, or a placeholder hero image before the real artwork is ready. Starting from one colour keeps the result in the same family as your logo or brand colour, and the swatches give you matching colours for text or buttons.

If you want smooth colour blending without visible shapes, try the mesh gradient generator. For one clean shape, the SVG blob generator is simpler. To explore harmonies in more detail before you start, open the colour harmonies tool.

How it works

First the base colour is converted to hue, saturation and lightness. The harmony rule rotates the hue and shifts the lightness to make five colours; lightness is kept between 5% and 95%.

Then, for each layer, a seeded random number generator chooses a shape type (if Mixed), a palette colour and an opacity between 0.35 and 0.85. Circles get a radius of 5–30% of the shorter side. Blobs are smooth closed curves 25–70% of the shorter side. Waves are curved bands filled down to the bottom edge. Lines are long, round-ended diagonal strokes 2–20 px thick. Shapes are drawn in order, so later layers sit on top. It all happens in your browser.

Worked examples

Default settings. Indigo #6366f1, analogous, 10 layers, seed 1. The palette is #63adf1 #6366f1 #a763f1 #c1c2f9 #4c1deb, and the background is <rect width="100%" height="100%" fill="#121a21"/>, the dark tint of the first colour.

Monochrome circles on black. Circles, monochrome, background #000000, 3 layers, 400 × 200. The palette becomes five shades of the same indigo, from #1216c8 to #e6e7fd. The first circle is <circle cx="312.5" cy="155.2" r="37.1" fill="#3438ed" fill-opacity="0.53"/>.

Limits and tips

• Shapes may run off the edges; that is intended, as it makes the image feel larger than the frame.
• With many layers and Mixed shapes, the image can get busy. Ten or fewer layers often work better behind text.
• The SVG has fixed pixel dimensions. To fill a wider area, set the size you need here rather than stretching it, or convert it with SVG to PNG at the final size.