Download gradient for free

Choose pre-made sizes or set your own

Copy the gradient colors

Presented in most common color systems 🎨

#{{ color }}
  • RGB {{ toRGB(color) }}
  • CMYK {{ toCMYK(color) }}
  • HSL {{ toHSL(color) }}
CSS-code 
background: -webkit-linear-gradient({{direction}}deg, {{ colorlinecss }});
background: linear-gradient({{direction}}deg, {{ colorlinecss }});
Copy code

Set the size and angle

Set height, width and angle of the gradient, then click on the generated image to download 🧙

Use keyboard arrows ← → to change the parameter by 1 unit

Download {{widthbig}}×{{heightbig}}

Download popular sizes

Here are most commonly used size ✨

1920×1080
1080×1920
1080×1080
1500×1000
320×320
1200×628
970×90
800×600
750×750
1500×500
1200×600
1800×1350
480×60
820×360
300×250
1600×1200

Similar gradients 🧁

Hello,
nice to see you!

google login
github white login github black login
yandex login

Forgot Password?

Enter the email address you used when you joined and we’ll send you instructions to reset your password.

Create
a new account

Password mismatch

Any ideas or suggestions? 💡

Write to us, we'll try to implement them or correct any mistakes. Google Form

Introducing Mesh Gradients

We've added a mesh gradient generator and a new mesh library for you to enrich with your gradients. Now you can create beautiful abstract gradients, download them, copy their CSS codes, save them in your personal dashboard, and add them to the public library.

We will soon add a radial gradient generator!

Mesh Gradients