CSS Gradient Generator
Design CSS gradients visually and copy the code.
Recommended next steps
Related tools
Convert colors between HEX, RGB, and HSL, and check WCAG contrast.
Test a regular expression against text and see matches and capture groups.
Create a QR code from any text or link and download it as PNG or SVG.
Frequently asked questions
It outputs a ready-to-paste background declaration using the standard linear-gradient() or radial-gradient() function — for example background: linear-gradient(90deg, #1a6741 0%, #7ed957 100%);. Copy it straight into your stylesheet or an inline style attribute.
Use the Add color stop button to insert extra stops, then set each stop's color and its position from 0% to 100%. The tool sorts the stops by position automatically, so you can add them in any order and the generated CSS stays consistent.
The angle sets the direction the colors blend in. 0deg points the gradient upward, 90deg points it to the right, and 180deg points it downward. Drag the angle slider to rotate the gradient and watch the live preview update.
No. The gradient is built entirely in your browser with plain CSS — there is no upload, no account, and nothing leaves this page. You can use it offline once the page has loaded.
Last updated 2026-06-23.