Gradient maker
Linear, radial and conic, with stops you drag by mouse, finger or arrow keys. Export to CSS, Tailwind, SVG and PNG — exactly what the preview shows.
- TypesLinear · Radial · Conic
- ExportCSS · Tailwind · SVG · PNG
- Presets20
- PriceFree, no account
Export
background: linear-gradient(135deg, #ff5fa2 0%, #ffb21e 100%);
--gradient: linear-gradient(135deg, #ff5fa2 0%, #ffb21e 100%);
bg-gradient-to-br from-[#ff5fa2] to-[#ffb21e]
@theme {
--gradient-brand: linear-gradient(135deg, #ff5fa2 0%, #ffb21e 100%);
}Type
Stops · 2
Presets
Import CSS
From two colours to finished CSS
Your work is kept in the browser: close the tab and the gradient will still be here.
Pick a type
Linear, radial or conic — each creates a distinct visual effect.
Add stops
Click the bar to add a stop in the colour found there, drag to move, arrow keys for precision.
Fine-tune
The angle on the dial, shape and size for radial, the centre right on the preview.
Export
CSS, Tailwind, a custom property, JSON, SVG and PNG; animation is one button.
About CSS gradients
Types, stops, Tailwind and export.
What's the difference between linear, radial, and conic gradients?
Linear transitions colours along a straight line at a chosen angle. Radial radiates colours outward from a centre point in a circle or ellipse. Conic sweeps colours around a centre like a colour wheel — great for pie charts, spinners or rainbow rings. All three are native CSS and need no images.
How many color stops can I add?
As many as you need — click the bar to insert one, and it takes the colour the gradient already has at that point. In practice 2–5 stops look best. Each stop has a position (0–100%), a HEX colour and an opacity. Arrow keys move the selected stop by 1%, Shift+arrow by 10%, and Delete removes it.
How do I use the Tailwind output?
Where Tailwind's utilities can express the gradient exactly, that is what you get: bg-gradient-to-r from-[#3b82f6] to-[#8b5cf6], with via-[#...] for a third stop. That holds for linear gradients on one of eight directions with the end stops at 0% and 100%, a middle stop at 50%, and fully opaque colours. Everything else comes out as an arbitrary value bg-[...]: longer, but it reproduces the preview exactly rather than approximately.
How does the animated gradient work?
The animation uses a CSS @keyframes that shifts the background-position on an oversized (200%×200%) gradient, creating a smooth loop. Copy the animation CSS from the export panel and apply it to your element. Works best with linear gradients of three or more stops.
Can I create a gradient that fades to transparent?
Yes — select a stop and drag its opacity towards 0. The stop is written as rgba(), giving a smooth fade. Perfect for hero overlays, cards that reveal content below and depth effects.
When should I use SVG export instead of CSS?
Download SVG when you need the gradient as a file — for Figma and Sketch, emails without CSS support, PDF generation or as a background image. For linear and radial the SVG matches the preview exactly (ellipses and the corner/side sizes included). SVG has no conic gradient, so for conic use PNG — it is exact for all three types.
Pairs well with these
Other UIXColors tools that pair well with CSS Gradient Maker.