CSS Gradient Generator
Build linear, radial, and conic CSS gradients visually. Adjust color stops and angles, pick a preset to start fast, then copy the CSS — ready to paste into your stylesheet.
Presets
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
How to use CSS Gradient Generator
- 1Choose a gradient type
Click Linear, Radial, or Conic at the top. Linear fades between colors along a straight line, Radial radiates from a center point, and Conic sweeps colors around a point like a pie chart.
- 2Set the angle or shape
For linear and conic gradients, drag the slider or type a number to set the angle in degrees (0–360). For radial gradients, toggle between Circle and Ellipse to control the shape.
- 3Customize your color stops
Click any color swatch to open the native color picker, or type a hex value directly. Drag the position slider to move a stop anywhere from 0% to 100% along the gradient.
- 4Add or remove stops
Click Add Color Stop to insert a new stop (up to 8 total). Click the × button to remove one — at least two stops are always kept. The strip above the list shows a live preview of your current gradient.
- 5Copy the CSS
Click Copy next to CSS Output for the full background shorthand, or copy background-image separately if you need just the gradient value. Paste directly into your stylesheet.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
- A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates out from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like the hands of a clock — great for pie-chart effects and color wheels.
Does the CSS Gradient Generator save my work?
- Yes. Your current gradient is automatically saved to your browser's local storage and restored the next time you visit, so you can pick up where you left off without losing your work.
How many color stops can I add?
- You can add up to 8 color stops. At least two stops are required to define a gradient, so the delete button is disabled when only two stops remain.
What CSS output does the tool generate?
- The tool outputs two ready-to-use lines: the background shorthand (e.g. background: linear-gradient(...)) and the background-image property. Both are standard CSS that works in all modern browsers without any prefix.
Do I need a -webkit- prefix for CSS gradients?
- No. All major browsers — Chrome, Firefox, Safari, and Edge — have supported unprefixed CSS gradients since 2014. The output from this tool uses the standard syntax and works across all modern environments without vendor prefixes.