Advertisement
← All Tools
Free · no sign-up

CSS Gradient Generator

Build linear, radial and conic gradients with a live preview, then copy the CSS.

  1. Pick a gradient type
  2. Add and position colour stops
  3. Copy the generated CSS
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);

Frequently asked questions

What gradient types can I create?
Linear (a straight line at any angle), radial (expanding from a center point), and conic (rotating around a center point, like a color wheel).
How do color stops work?
Each stop is a color pinned at a position along the gradient. Add as many stops as you like and drag them to reposition — the preview updates live so you can fine-tune the blend.
What format is the copied CSS in?
A ready-to-paste `background` value using linear-gradient(), radial-gradient() or conic-gradient(), with all your color stops and angle/position included — just paste it into your stylesheet.
Is anything I design here saved or uploaded?
No. The gradient is built and rendered entirely in your browser — nothing is uploaded or stored, and there is no account.
Do I need to install anything or sign up?
No. It runs entirely in your browser — no software install, no account, no email required.
Advertisement
Advertisement