CSS Gradient Generator
Make a linear, radial or conic CSS gradient with as many colour stops as you like, then copy the CSS code or download it as an image.
.png
Make a linear, radial or conic CSS gradient with as many colour stops as you like, then copy the CSS code or download it as an image.
Choose a gradient type, set its colours and the CSS line at the top of the panel updates as you go, ready to paste into a stylesheet as a background. Tap the line to copy it. The preview is the gradient exactly as a browser draws that CSS, so what you see is what your page will show. Start from two colours, add more, move them, change the angle, and when it looks right, copy the code or download the same gradient as an image for a slide, a wallpaper or a social media background.
Linear runs the colours along a straight line; the angle sets its direction, where 0 degrees points up, 90 runs left to right and 180 top to bottom. Radial spreads the colours out from the centre in an ellipse that reaches the corners, the CSS default for radial-gradient. Conic sweeps the colours around the centre like the hands of a clock, starting from the angle you set, which is how pie-chart and colour-wheel backgrounds are made. The angle control hides for radial, which has no direction.
The bar under Colour stops shows the gradient from its first stop to its last. Tap the bar anywhere to add a stop there; it takes the colour the gradient already has at that point, so the look does not jump, and you can then change it. Drag a handle along the bar to move a stop, or type an exact position in percent. The selected stop's colour is set with the swatch or a HEX code, and the bin removes it; a gradient keeps at least two stops and takes up to ten.
Download writes the gradient as a PNG, JPG or WebP file. Open Image size to choose the width and height, up to 8192 pixels a side, or pick a preset such as a Full HD or 4K wallpaper, a phone wallpaper, a square post or a link preview image. The file is painted from the same CSS, sized to the new dimensions, so a linear gradient still reaches its end colours in the corners. For a single flat colour instead, use /solid-color-generator/; to find colours that go together, try /color-palette-generator/.
The gradient is drawn in your browser and the image is created on your device. Nothing is uploaded, and the colours of a design you are still working on stay with you.
Tap the CSS line to copy it and paste it into the rule for the element you want to colour, for example a page body, a header or a button. It is a complete background declaration, so it replaces any background colour already set there.
A radial gradient changes colour with the distance from the centre, in rings. A conic gradient changes colour with the angle around the centre, in slices, so its colours meet in a point in the middle.
Yes. Build the gradient, open Image size, choose the phone wallpaper preset or type your screen size, and download the image. It is created at exactly that size.
No. The CSS and the image are both made on your device, and nothing is sent to a server.