CSS Gradient Generator

Repeat

각도: 135deg

색상 정지점

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Last updated: 2026 · Free online tool

What is CSS Gradient Generator?

Free online visual editor to create CSS gradients and copy the code

1
Select Type — Choose the gradient type (linear, radial, conic).
2
Adjust Color Stops — Adjust the color and position of each color stop.
3
Preview — Check the result in real-time in the preview.
4
Copy CSS Code — Copy the CSS code to the clipboard using the 'Copy' button.

There is no limit, but 2–6 is typical. Too many may affect performance.

Yes. Enable the 'Repeat' checkbox to add the repeating prefix.

Five presets are provided: Sunset, Ocean, Forest, Midnight, and Rainbow.

Currently, only pure CSS is output. Tailwind conversion is planned for a future update.

No. All processing is done in the browser.