How it works
The Gradient Generator creates CSS gradient declarations โ linear, radial, or conic โ through a visual editor with color stops, angle controls, and a live preview, then outputs the complete CSS background property.
CSS gradients replaced image-based gradient backgrounds in modern web design, offering resolution-independent, customizable color transitions. The syntax has 3 variants: linear-gradient() for directional gradients, radial-gradient() for circular/elliptical bursts, and conic-gradient() for color wheel-like transitions.
How to use it: select gradient type (linear/radial/conic). Add color stops by clicking on the gradient bar โ each stop has a color picker and position slider. Drag stops to reorder them. Set the angle for linear gradients (0โ360ยฐ) using the visual wheel or type a value. For radial gradients, configure the center point and shape (circle or ellipse). Click Copy to get the full CSS.
Advanced options: add multiple color stops at the same position to create hard color transitions (no blend). Use transparent as a stop color for fade-out effects. The tool generates the -webkit- prefix alongside the standard property for maximum browser compatibility.
CSS output: the generator produces the full background: linear-gradient(...) declaration ready to paste into a stylesheet. It also shows the background-image variant for use alongside a background-color fallback.
Frequently Asked Questions
- A conic gradient sweeps colors around a center point, like a color wheel or pie chart. conic-gradient(red, yellow, green, blue, red) creates a full-spectrum color wheel. They're used for pie charts, pie slices, and color wheel effects.
- Place two color stops at the same position. For example: linear-gradient(red 50%, blue 50%) creates an exact half-red, half-blue split with no gradient blend.
- They're equivalent: to right = 90deg. to top = 0deg. to bottom = 180deg. to left = 270deg. The degree system gives more precision for diagonal gradients: 45deg goes from bottom-left to top-right.
- Yes. Linear and radial gradients have full support in all modern browsers. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. The tool outputs -webkit- prefixed versions for older WebKit browsers.