Free · No account needed

Gradient generator

Build a gradient with your colors or start with a preset. Adjust the blend and export a background for your design or website.

Drag the points in the preview. Use X and Y for precise positioning.

16:9

CSS

Presets

Choose a starting point and make it your own.

About the tool

Can I use the gradient commercially?

Yes. Use the gradients you create here in personal and commercial projects, including client work.

Should I use PNG or CSS?

PNG is a background for Figma, Photoshop, banners or posts. CSS creates a website background that adapts to the element’s size. Choose the image size before downloading.