Tools
Gradient generator
Design linear, corner and mesh gradients and export them as CSS or an image.
Adds grain texture to reduce banding. Only applies to the image export, not CSS.
linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)
About this tool
This generator helps you design gradient backgrounds for websites, slides, social posts or wallpapers. It has three modes: Linear, the classic gradient with an angle and colour stops; Corners, which blends four colours out from the corners; and Mesh, with 4 or 9 colour points you can drag anywhere to get the soft, organic backgrounds that are common in modern interfaces.
Pick a mode from the tabs at the top. In Linear, use Add stop to add colours, change their colour and position, drag them to reorder and set the angle with the dial, the slider or the 45° shortcuts; Pigment blend inserts in-between colours calculated in OKLab. In Corners and Mesh, click the dots on the preview to change their colour. The Noise control adds grain to prevent banding.
Everything is rendered in your browser on a canvas: nothing is uploaded and no account is needed. You can export a PNG at any size or use shortcuts such as 1K, 4K, HD or a vertical story format, and copy the CSS. Bear in mind that noise only applies to the PNG, and that the corners and mesh modes have no exact CSS equivalent: the code is an approximation and the image is the faithful version.
Frequently asked questions
How do I use a gradient as a CSS background?
Copy the code with Copy CSS and use it as the value of background or background-image, for example: background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);. In Linear mode the result is exact.
What is a mesh gradient?
It is a gradient where colour does not run in a single direction but blends out from several points spread across the surface. It produces soft, aurora-like backgrounds that CSS cannot reproduce exactly, so it is best exported as a PNG.
Why does my gradient show bands or steps?
It happens when two similar colours are stretched over a large area and the screen does not have enough in-between shades. Raise the Noise slightly before exporting the PNG: the grain hides the banding.
What does Pigment blend do?
It adds three intermediate colours between each pair of stops, calculated in the OKLab colour space. This avoids the greyish patch that sometimes appears in the middle of a gradient between complementary colours.