Current pattern: none

Click Everything or press the space bar for a new gradient.

Get CSS What is this?

What is this thing?

This generates random CSS 3 gradients, from six different patterns. The other buttons let you tweak aspects of the current gradient.

You can take the CSS which makes these patterns and use it in your own site. It's extremely unlikely that anyone else will have the same background as you.

If you find a background you particularly like, you can share the URL, and whoever visits it will see the same background. Very occasionally, the Radial Gradient pattern can create something which looks a bit like boobs. I'm sorry about that.

IE 10 and above, Firefox, Chrome, Safari, Opera.

Where have you pinched this from?

This is part of a standard from the W3C , which was intended to generate gradient backgrounds. I was heavily inspired by the CSS 3 Patterns Gallery, which is a human-created collection of CSS 3 backgrounds. It's very unlikely you'll find stuff as nice as that here. But perhaps if you keep pressing the space bar, you might find something close.

How does this work?

The JavaScript generates a random sixteen-digit number, then uses each digit to control a different aspect of the gradient (you can see this number after the # sign in the URL ). The first six digits establish the red, green and blue channels of the primary colour. The next digit establishes the tint value - how far away the next colour will be, from the primary colour. Other numbers control the angles which lines might rotate, or how many times something loops (each loop might be a band of colour). You can freeze some of these numbers, to see the effects of the figures which are still random.

The gaps between lines are generated using an unstable iterated function. This means that the output of a sum - a very simple sum - is fed into itself over and over again. This sum is:

z = (4 × z) × (1 - z)

Instead of approaching ∞, zero, or tending towards another number, this sum fluctuates wildly, seemingly at random (and yet it is completely deterministic).

Unfortunately, the values produced from this sum are sometimes too small to be useful, so they are manipulated slightly.

What the digits do

Each of the sixteen digits in the URL are used slightly differently, depending upon which pattern is used.