Loading...
Loading...
background: linear-gradient(90deg, #4ade80 0%, #3b82f6 100%);background-image: linear-gradient(90deg, #4ade80 0%, #3b82f6 100%);Create stunning CSS gradients for your websites and applications with our free online gradient generator. Design linear, radial, and conic gradients with full control over colors, positions, and angles—then copy the CSS code with one click.
CSS gradients are essential for modern web design, adding depth, visual interest, and professional polish to backgrounds, buttons, and UI elements. Our tool makes it easy to experiment with colors and create gradients that match your brand perfectly.
Linear, radial, and conic gradients with full angle and rotation control.
Add up to 5 color stops with precise position control (0-100%).
See your gradient update in real-time as you adjust settings.
Copy CSS background or background-image property instantly.
Linear gradients flow in a straight line at a specified angle. Radial gradients radiate from a center point outward in a circle. Conic gradients rotate around a center point like a color wheel.
Our tool supports 2-5 color stops. You can add more colors and control exactly where each color appears in the gradient using position percentages.
Yes! The generated CSS code works with any framework including React, Vue, Angular, Tailwind, Bootstrap, and vanilla CSS.
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Linear and radial gradients have excellent support, while conic gradients work in newer browser versions.