CSS Gradient Generator
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Last updated: 2026 · Free online tool
What is CSS Gradient Generator?
Free online visual CSS gradient generator: design linear, radial and conic gradients, add color stops, tweak the angle, then copy ready-to-use CSS for your backgrounds.
How to Use
- 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.
Related Tools
CSS Box Shadow Generator Free online CSS box-shadow generator with controls for offset, blur, spread, color and inset, offering a live preview of the shadow and producing copy-ready box-shadow CSS code for any element.
CSS Border Radius Generator Free online CSS border-radius generator with eight independent corner handles and sliders, giving a live preview of the rounded shape and producing copy-ready border-radius CSS code for any element.
Color Converter Free online color converter that translates instantly between HEX, RGB, HSL and OKLCH codes and calculates the WCAG contrast ratio between two colors so you can check accessibility compliance with ease.
Frequently Asked Questions
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.