Quick answer: pick your colors and gradient type in our free CSS Gradient Generator, preview it live, and copy the generated CSS code directly.
Linear vs Radial Gradients
Linear gradients transition colors along a straight line at any angle — great for backgrounds and buttons. Radial gradients transition outward from a center point — useful for spotlight or glow effects.
The CSS Syntax
A basic linear gradient looks like: background: linear-gradient(135deg, #FF6B9D, #C44FFF);. The angle controls direction, and you can add as many color stops as needed.
Frequently Asked Questions
Can I use more than two colors?
Yes, add multiple color stops for multi-color gradients.
Do gradients work in all browsers?
CSS gradients are supported in all modern browsers without prefixes.
Can I use gradients as text color?
Yes, using background-clip: text with a transparent text color, though it requires extra CSS beyond the basic gradient.
✨ Try it now — free & instant
Open the Tool →