Gradient Generator
Create multi-layer gradients with linear, radial, and conic types
Tip: Drag handles on preview to move gradient direction. Drag stop markers on the bar to reposition. Drag layer tabs to reorder.
CSS Output
background-image + background-color
How the Gradient Generator Works
Create multi-layer CSS gradients with linear, radial, and conic types. Adjust color stops visually and copy production-ready CSS.
Multi-Layer Gradients
Stack multiple gradient layers and blend them visually. Each layer has its own type, colors, and angle. Combine linear, radial, and conic gradients in one element.
Precise Color Stops
Add, move, and delete color stops on a visual bar. Adjust position and opacity for each stop. The CSS updates in real time as you drag.
Linear, Radial & Conic
Choose from three gradient types per layer. Set angle for linear, shape and position for radial, and start angle for conic. Mix types across layers.
Copy CSS
Copy the complete background CSS with all layers in one click. The output uses standard CSS gradient syntax supported by all modern browsers.
Frequently Asked Questions
Linear gradients transition colors along a straight line at a given angle. Radial gradients radiate from a center point outward in a circle or ellipse. Conic gradients sweep colors around a center point like a pie chart. Each type creates a distinct visual effect.
Yes. CSS allows stacking multiple gradients in a single background property, separated by commas. This tool makes it easy to add layers, reorder them, and preview the combined result.
A color stop defines a color at a specific position along the gradient line (0% to 100%). The browser smoothly interpolates between adjacent stops. Adding more stops gives you finer control over color transitions.
Yes. CSS gradients — linear, radial, and conic — are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Conic gradients were the last to gain full support and have been universal since 2020.