Tools › Gradient Generator

Create beautiful gradients
and copy the CSS

Choose colors, type and angle — get ready CSS code to paste into your project. Free, no registration.

CSS
Type
Angle
135°
Colors
Presets

CSS Gradient Types

A linear gradient runs along a straight line at a given angle. Radial spreads from the center as a circle or ellipse. Conic rotates around a central point like a color wheel.

Ready CSS code

The tool generates a ready CSS property background that can be pasted directly into your styles. Supported by all modern browsers without prefixes.

Up to 5 color stops

Add up to 5 color stops for complex multi-color gradients. Each stop sets a color and position in percent. Remove extras with one click.

FAQ
How do I use a CSS gradient in my project?
Copy the generated CSS and paste it into the background property of any element. Example: div { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
What is the difference between linear and radial?
Linear creates a transition along a straight line at an angle. Radial creates a circular or elliptical transition from center to edges. Conic rotates around a point.
Can I add multiple colors?
Yes, click "Add color" — you can add up to 5 stops. Each stop sets a color and position from 0 to 100 percent.
Is this tool free?
Yes, completely free with no limits. No registration required, everything runs in your browser.