Gradient Generator
Create beautiful 2-3 color gradients. Adjust the angle, copy the CSS or download a high-res PNG.
About the gradient generator
A gradient is the cheapest way to make a flat layout feel designed, and this tool gives you a clean two or three color blend with an adjustable angle. You get both outputs in one place: the CSS declaration for a live website, and a high resolution PNG for slides, thumbnails, phone wallpapers and print.
The CSS output is written exactly as a browser expects it, so it can be pasted straight into a stylesheet or a component without editing. The PNG export uses the same angle and stops, which means the web version and the exported artwork match instead of drifting apart as the design evolves.
How to use it
- Pick the first and second colors, and enable the third stop if you want a more complex blend.
- Drag the angle slider until the light direction matches the rest of your layout.
- Click Copy CSS to grab the declaration, or Download PNG for the image.
- Keep the same stop values in your design file so later revisions stay consistent.
FAQ
Which angle should I use?
135 degrees is a safe default for hero sections and cards because it reads as light coming from the top left. Vertical (180 degrees) suits banners, and 90 degrees works for sidebars.
Can I use the PNG commercially?
Yes, it is generated from your own color choices with no third-party assets. See sticker marketing for small business for ways to reuse brand gradients.