Printable swatch sheet
One page: numbered shades, their codes, and empty boxes to color.
Free tool · no sign-up
Gradient Generator
A free gradient maker: pick your colors, set the number of shades, then copy the codes or download your gradient as a wallpaper. Everything happens in your browser.
Gradient type
Desktop · 1920 × 1080
Gradient shades: tap one to copy its code
- Free, no sign-up
- Free to use, even commercially
- Nothing is uploaded
Download Your Gradient as a Wallpaper or Background
The same gradient, sized for every screen. Making a wallpaper takes one click.
- iPhone 1179 × 2556
- Android 1080 × 2400
- Desktop 1920 × 1080
- Mac 2560 × 1600
- Story Instagram · 1080 × 1920
- Square Social media · 1080 × 1080
Gradient Color Codes (HEX, RGB, CSS)
Every shade with its code, copied in one click, plus CSS ready to paste.
| # | HEX | RGB | Copy |
|---|---|---|---|
| 1 | #5A3825 | rgb(90, 56, 37) | |
| 2 | #724B33 | rgb(114, 75, 51) | |
| 3 | #8B6042 | rgb(139, 96, 66) | |
| 4 | #A47551 | rgb(164, 117, 81) | |
| 5 | #BA9574 | rgb(186, 149, 116) | |
| 6 | #D1B599 | rgb(209, 181, 153) | |
| 7 | #E9D6BF | rgb(233, 214, 191) |
Copy the CSS Gradient Code
background: linear-gradient(160deg, #5A3825, #724B33, #8B6042, #A47551, #BA9574, #D1B599, #E9D6BF);Turn Your Gradient Into a Palette or Printable Swatch Sheet
To recreate the gradient with colored pencils or paint: the sheet lists every shade and gives you boxes to practice.
Try it on a coloring page
Your shades on a real drawing, from the center outward.
Want to do it by hand? Pick a drawing from our coloring pages:
Ready-Made Gradients
One click loads them into the tool. Each color also has its own page with wallpapers to download.
Random Gradient Generator
Out of ideas? Draw five colors that work together, then turn them into a gradient.
Frequently asked questions
How do I make a gradient wallpaper?
Pick your colors, choose a format (phone, desktop, story or square), then “Download PNG”. The image is made at the right size, with no watermark.
How do I get the CSS code of a gradient?
The CSS code updates as you edit. Click “Copy CSS” and paste it into your stylesheet.
Can I make a 3-color gradient?
Yes: “Add a color” takes you up to 6 colors, so 3- and 4-color gradients work the same way. The shades flow from one color to the next, in order.
What’s the difference between a linear and a radial gradient?
A linear gradient runs from one edge to the other at an angle; a radial gradient starts in the center and spreads out in a circle.
Are the gradients free to use?
Yes. Everything you create here is yours to use, for personal or commercial projects.
