Colors & design
CSS Gradient Generator
Design your gradient by eye, copy the CSS in one click.
A good gradient adds depth to a background, a button or a hero section — but finding the right colors and angle takes trial and error. This editor lets you compose visually: add two to five color stops, position each one precisely, adjust the angle of a linear gradient or switch to radial. The preview fills the frame and updates with every tweak, exactly as your browser will render it. When it looks right, one click copies the full CSS declaration (background: linear-gradient(…)), ready to paste into a stylesheet, a component or an HTML email. No account needed — everything runs in your browser.
How does it work?
- Choose the gradient type: linear or radial.
- Add your colors (2 to 5 stops) and position them.
- Adjust the angle and fine-tune by eye with the full-frame preview.
- Copy the generated CSS into your stylesheet.
Frequently asked questions
Linear or radial — what's the difference?
A linear gradient progresses along a straight line at the angle you choose — ideal for backgrounds and buttons. A radial gradient radiates outward from the center — great for halo and spotlight effects.
How do I get a subtle, elegant gradient?
Stay between neighboring hues on the color wheel and keep the lightness gap small: two close shades almost always beat a rainbow. A 135° angle gives a natural diagonal flow.
Does the generated code work everywhere?
Yes — linear-gradient() and radial-gradient() are supported by every current browser, no prefixes needed. Only some legacy email clients ignore them, so set a fallback background color there.