CSS Gradient Generator
Design CSS gradients with a live preview.
Free · No sign-up · Works in your browser
CSS
background: linear-gradient(100deg, #3b5bff, #22d3ee);About the CSS Gradient Generator
Free CSS gradient generator — create linear gradients with custom colors and angle, preview live, and copy the CSS.
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.