CSS Gradient Generator

About the CSS Gradient Generator

The CSS gradient generator builds the value of the background property for you. A linear gradient blends colours along a line at an angle, where 0 degrees points up and 90 degrees points right. A radial gradient spreads colours outward from a centre as a circle or an ellipse, and a conic gradient sweeps them around a centre like a colour wheel, starting at the angle you choose. Each colour stop has a position in percent, and two stops at the same position make a hard edge, which is how stripes are drawn. The repeating option repeats the pattern across the box, using the distance between your first and last stop as the length of one repeat. The tool sorts your stops by position, writes colours as lower case hex values and accepts the short form such as #f80 and eight digit colours with transparency. The first line of the output can be a plain colour, so browsers that cannot draw the gradient still show something. The CSS was tested in Chromium: 800 random gradients of every type were drawn and more than 200,000 pixels were compared with an independent calculation of the same gradient, written from the CSS rules, and the largest difference was one level of colour out of 255. Everything runs in your browser and nothing is uploaded.