Free Gradient Generator
Blend 2 to 5 colors, or pull them from your own photo. Download it for Procreate, Canva and more, or copy the CSS.
Colors
2Style
CSS
The gradient exactly as you see it here, in every browser.
background: #e816ea; background: linear-gradient( 90deg, #e816ea 0%, #e23eea 13%, #dc55ea 25%, #d667ea 38%, #ce77ea 50%, #c685ea 63%, #bd92ea 75%, #b39ee9 88%, #a7a9e9 100% );
Gradient color palette
Gradient background and wallpaper
Gradient generator questions
Everything about the gradients, the files and how you can use them.
What is a gradient generator?
A gradient generator blends two or more colors into a smooth transition. This one is free: choose 2 to 5 colors, linear or radial, or pull them from a photo, then download a PNG background or wallpaper, a Procreate palette of the gradient, or copy its CSS.
How do I make a gradient background or wallpaper?
Pick your colors, then under Gradient background and wallpaper choose a size for an iPad, a phone, a desktop or a square post, and download the PNG. It is free for personal and commercial use.
Can I use a gradient in Procreate?
Yes. Under Gradient color palette, choose 2 to 30 steps and download the .swatches file: the gradient becomes a Procreate palette for painting smooth blends. You can also download the PNG and use it as a canvas.
What CSS does it give me?
Three versions. Exact is the gradient as you see it, in every browser. Short is one line blended in Oklab, for recent browsers, with a fallback for older ones. Basic is the colors alone, blended by the browser.
Why do the colors blend so smoothly?
The colors are mixed in Oklab, a color space that follows how the eye sees, so the middle of the gradient stays bright instead of turning gray or muddy.