background: linear-gradient(135deg, #7f00ff 0%, #e100ff 50%, #00d4ff 100%);bg-[linear-gradient(135deg,_#7f00ff_0%,_#e100ff_50%,_#00d4ff_100%)]About CSS Gradient Generator
CSS Gradient Generator builds linear, radial, and conic gradients with full multi-stop support and a live preview. Add as many colour stops as you like, drag them along the gradient axis, set angle or position, and copy the resulting CSS — the canonical `background-image: linear-gradient(...)` form, ready to paste into a stylesheet or design token.
Reach for it whenever a gradient is part of the design: hero backgrounds, button states, skeleton-loader shimmer, dividers, or accent strokes. The preview is live, so iteration is instant — no edit-save-reload cycle. Color Picker handles the single-colour primitive; this tool stacks colours into a gradient on top of it. CSS Units Converter is the unrelated tool for converting numeric units (px ↔ rem ↔ vw); it has nothing to do with colour.
Examples
type: linear
angle: 135deg
stops: #1f2937 0%, #4f46e5 50%, #ec4899 100%background-image: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #ec4899 100%);Three-stop diagonal gradient. Switch to radial for a circular gradient or conic for a sweep around a centre point.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
Linear gradients run along a straight line at any angle. Radial gradients radiate outward from a centre point in a circle or ellipse. Conic gradients sweep around a centre point like a pie chart. Pick by the visual effect — linear for backgrounds and stripes, radial for spotlights and orbs, conic for colour wheels and sweeps.
Are multiple stops supported?
Yes — add as many colour stops as you need. Each stop has a colour and a position (percentage along the gradient axis). The preview interpolates between stops, so a three-stop gradient produces two transitions, four stops produce three, and so on.
How is this different from Color Picker?
Color Picker handles a single colour and converts it between formats (HEX, RGB, HSL, HSV). CSS Gradient Generator stacks two or more colours into a gradient. Use Color Picker first to nail down the individual colours, then drop them into Gradient Generator to compose the gradient.
Will the output work in older browsers?
Yes for any browser from the last decade. Modern syntax (`linear-gradient`, `radial-gradient`, `conic-gradient`) is supported in every browser still receiving updates. For very old IE support, you would need a fallback `background-color` and possibly a vendor-prefixed copy — the tool emits the modern form only.