CSS Gradient Generator
Generate CSS gradients visually. Linear, radial, and conic types. Adjust angle, position, and up to 6 color stops with live preview. Free online gradient generator.
How to Use
- Select a gradient type — Linear, Radial, or Conic — using the tabs at the top.
- For Linear: drag the angle slider or type a value between 0 and 360 degrees. Use the direction buttons (Top / Right / Bottom / Left) as quick-set shortcuts.
- For Radial: choose a shape (circle or ellipse) and a center position from the dropdowns.
- For Conic: set the starting angle with the slider and pick the center position.
- In the Color Stops section, click the color swatch or type a hex value to change each stop’s color. Adjust the percentage to control its position along the gradient.
- Click + Add Stop to insert more stops (up to six), or click × to remove one (minimum two remain).
- The preview rectangle updates in real time as you make changes.
- Click Copy to copy the CSS rule to your clipboard.
Understanding the Generated CSS
The output sets background on a .gradient class. For linear gradients, the angle
controls the direction — 0deg is top-to-bottom, 90deg is left-to-right. For radial gradients, the syntax
specifies the shape and its position before the color list. For conic gradients, from sets
the starting angle and at sets the sweep center.
Common Use Cases
CSS gradients are used for hero section backgrounds, card headers, button fills, progress bars, decorative
overlays, and text fill effects (via background-clip: text). Conic gradients are especially
useful for pie charts and color-wheel pickers rendered purely in CSS.
FAQ
What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colors along a straight line defined by an angle. A radial gradient radiates outward from a center point in a circular or elliptical shape. A conic gradient sweeps colors around a center point like a color wheel, starting from a specified angle.
How do I use the generated CSS gradient?
Copy the generated CSS and paste it into your stylesheet. The output sets the background property on a .gradient class. Rename the class to match your element and apply it wherever you need the gradient — a div, a button, or any block element.
Can I add more than two colors to my gradient?
Yes. Click the Add Stop button to insert additional color stops, up to a maximum of six. Each stop has its own color picker, hex input, and position percentage. Adjust the percentage values to control where each color begins and ends in the gradient.
What does the position percentage mean in a color stop?
The percentage defines where along the gradient that color is fully rendered. A stop at 0% starts at the very beginning, and one at 100% ends at the very end. Stops in between control blending. Setting two adjacent stops to the same percentage creates a hard color edge with no transition.
Why should I prefer CSS gradients over gradient images?
CSS gradients are resolution-independent, scale perfectly on any display density, add no HTTP requests, and can be animated or transitioned with CSS. They are also easy to update by changing a few values, whereas regenerating an image requires an external tool each time.