Design & Color Tools
CSS Gradient Generator
Design CSS gradients with a live preview.
FreeNo sign-upWorks in your browser
CSS
background: linear-gradient(100deg, #3b5bff, #22d3ee);About the CSS Gradient Generator
Create CSS gradients free with a live preview — pick your colors, set the angle, watch the gradient update in real time, and copy the ready-to-paste background property. Gradients are the fastest way to make buttons, cards, and hero sections feel designed instead of default, and hand-writing linear-gradient() syntax from memory is nobody's idea of fun.
How to use the CSS Gradient Generator
- 1Choose two colors and the angle.
- 2Preview the gradient live.
- 3Copy the CSS background property.
Frequently asked questions
Where do I use the output?
Paste the background property onto any element in your CSS or inline styles.
Can I use this for buttons and hero sections?
Yes — gradients work on any element's background, from buttons to full-page heroes.
Can I use gradients on text?
Yes — apply the gradient as a background with background-clip: text and a transparent text color. It's a popular hero-heading effect.