Gradient Collection
Hundreds of gradients, one click to copy.
Explore gradients and copy CSS code.
Gradient collection
Explore hand-picked and generated gradients and copy CSS code.
How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
Browse
- Scroll through the gradients.
- Press a filter such as Warm, Cool, Pastel, Dark or Vivid.
- Press Show more gradients to see more.
Why we do this: Seeing many gradients side by side is the fastest way to find a look you like.
Copy the CSS
- Click on a gradient.
- A message in the corner confirms the copy.
- Paste it into your style sheet.
Why we do this: You get a ready-to-use line of CSS.
Make it yours
- Press the pencil on a card.
- The Gradient Maker opens with that gradient.
- Change colors, angle and stops.
Why we do this: A ready-made gradient is a great starting point for your own.
Questions people ask
Quick answers.
Are these gradients free to use?
Yes. They are simple color combinations you can use in your own projects.
How are they made?
A hand-picked set plus gradients generated from color-harmony rules, then filtered so the colors blend nicely.