Gradient Generator
Design a CSS gradient visually and copy the code straight into your stylesheet.
Presets
Customize
What this tool does
Design a CSS gradient visually and copy the code. Pick a preset or choose your own start and end colors, set the type and direction, and watch the preview update.
How to use it
Choose linear or another type, set the direction and colors, or press Random for ideas. Copy the output as CSS, SCSS or Tailwind, or download the gradient as a PNG.
Quick example
A 135 degree linear gradient from orange to teal gives a diagonal blend that works well behind a hero heading. Copy the CSS line and paste it into the background property.
FAQs
Is the PNG the same as the CSS? It is a picture of the same gradient. Use CSS where you can, since it stays sharp at any size.
Will it work in every browser? Standard linear and radial gradients are supported by all current browsers.
Is my design saved? No. Nothing leaves your browser.
Need more than a free tool?
We build the strategy, the site, and the growth engine behind it.