CSS Gradient Generator
Design beautiful linear, radial, and conic CSS gradients with a live visual editor. Drag color stop handles, adjust angles, save your favorites, and copy the ready-to-paste CSS instantly.
Gradient Type
Radial Settings
Conic Settings
How to Use the CSS Gradient Generator
- Choose a Preset from the scrollable strip to load a starting gradient instantly, or begin from scratch.
- Select a gradient type: Linear for directional gradients, Radial for circular/elliptical bursts, or Conic for angular sweeps.
- For Linear, drag the angle slider or click one of the 8 direction arrow shortcuts.
- For Radial, choose the shape (Ellipse or Circle) and the center point position.
- For Conic, set the start angle and the rotation center point.
- Add up to 8 color stops with the + Add Stop button. Each stop has a color picker, hex input, opacity, and position controls.
- Drag the handles on the gradient bar left and right to reposition color stops visually. Arrow keys work too (Shift+Arrow for larger steps).
- The live preview updates in real time so you always see the exact result.
- Click ⎘ Copy CSS to copy the two-line CSS rule (with fallback) straight to your clipboard.
- Name your gradient and click Save to store it. Open Saved to browse, load, or delete saved gradients.
- Use Export All JSON to download all saved gradients as a backup file, and Import JSON to restore them later.
About This Tool
This CSS gradient generator works as a linear-gradient builder, radial-gradient maker, conic-gradient tool, and CSS background generator. Use the visual editor to set color stops, adjust the gradient angle or direction, switch between gradient types, and instantly see the result rendered live.
Copy the complete background or background-image CSS property with one click. Useful for web designers, front-end developers, and anyone who needs gradient backgrounds for buttons, hero sections, cards, headers, or full-page designs. Save your gradients as favorites for quick access.