Gradient Generator
Design a CSS linear or radial gradient visually. Set the angle, pick up to five color stops, and watch the preview update live — then copy a ready-to-paste background declaration.
Color stops
CSS
About this CSS gradient generator
Create smooth color gradients for backgrounds, buttons, and hero sections without writing the syntax by hand. Choose a linear gradient and dial in any angle from 0 to 360 degrees, or switch to a radial gradient that radiates from the center. Add up to five color stops, each with its own hex color and position, and the live preview shows precisely what the browser will render. When it looks right, copy the full background declaration straight into your stylesheet.
How to use it
- Pick Linear or Radial from the tabs — the angle slider only applies to linear gradients.
- Click a color swatch to choose a color, or type a hex value, and set each stop's position in percent.
- Use + Add color to add stops (up to five) and the × button to remove one.
- Click Copy to grab the full
background: …;line for your CSS.
Is anything uploaded?
No. The gradient is built and previewed entirely in your browser with JavaScript and CSS. Nothing you create is sent to a server or saved anywhere.
What does the angle mean in a linear gradient?
The angle sets the direction the colors flow. 0deg points straight up, 90deg points to the right, and 180deg points down — matching the CSS specification, so the copied code looks identical to the preview.
Can I use this gradient as a button or text background?
Yes. Paste the background declaration onto any element. For gradient text, add background-clip: text and color: transparent to the same element.
Why are positions in percentages?
Percentages place each color stop along the gradient line from start (0%) to end (100%), which keeps the gradient responsive to any element size. You can leave gaps or overlap stops for sharper transitions.