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 CSS3 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.

Browser support

IE10 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 CSS3 Patterns Gallery, which is a human-created collection of CSS3 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.

Digit use per pattern

Pattern

Repeating Radial

Radial Gradient

Repeating Linear

Plaid

Art Deco

Cubic

Desc.

Circular gradients radiating out and repeating

Off-set circles, which sometimes overlap

Like a colourful barcode

Like plaid, gingham or tartan

A saw-tooth pattern

Boxes with spiky, irregular frames

0

Primary red channel

1

2

Primary green channel

3

4

Primary blue channel

5

6

Tint (how close the following colours are to the primary colour)

7

Shape (circle or ellipse)

Number of loops

Degrees (rotation)

8

Circle position

No. of bands of colour

(not used)

9

Number of bands of colour

Number of loops

10

Background size

Degrees (rotation)

Background size

11

12

(not used)

Background size

(not used)

13

14

Gap between colour bands

Transparency

Gap between colour bands

15

Which pattern is used