CSS Gradient Generator
Build CSS gradients visually with live preview
CSS Gradient Generator — Live Preview Online Free
Create professional CSS gradients with real-time preview. Supports linear (linear-gradient), radial (radial-gradient) and conic (conic-gradient) gradients. Customize colors, positions and angles, then copy the ready-to-use CSS code directly into your project.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
How It Works
- Choose the gradient type: linear, radial or conic
- For linear and conic gradients, set the rotation angle
- Add color stops with the color picker and set the percentage position
- The preview updates in real time as you modify values
- Copy the generated CSS code and paste it into your stylesheet
Frequently Asked Questions
What is the difference between linear-gradient and radial-gradient?
linear-gradient creates a color transition along a straight line (defined by the angle). radial-gradient radiates colors from a central point outward in a circular or elliptical shape.
What is a color stop?
A color stop is a point in the gradient where a specific color starts or ends. The position is expressed as a percentage (0% = start, 100% = end). You can add as many stops as you want to create complex gradients.
Does the generated CSS code work on all browsers?
Yes, CSS gradients are supported by all modern browsers (Chrome, Firefox, Safari, Edge). For very old browsers you might need vendor prefixes (-webkit-), but in general this is no longer necessary.