Gradient Maker

Linear transitions colors along a straight line at a chosen angle. Radial radiates colors outward from a center point in a circle or ellipse shape. Conic sweeps colors around a center point like a color wheel — great for pie charts, spinners, or rainbow rings. All three are native CSS and require no images.

You can add as many stops as you need — click anywhere on the gradient bar to insert a new one. In practice, 2–5 stops give the most visually pleasing results. Too many stops with similar colors can look muddy. Each stop has a position (0–100%), a hex color, and an opacity setting that supports semi-transparent effects.

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% and a middle stop at 50%. Everything else — radial or conic, an arbitrary angle, moved stops, more than three colours — comes out as an arbitrary value bg-[...]: longer, but it reproduces the preview exactly rather than approximately.

The animation uses a CSS @keyframes that shifts the background-position on an oversized (200%×200%) gradient, creating a smooth looping movement. Copy the animation CSS from the export panel and apply it to your element. Works best with linear gradients with at least 3 color stops.

Yes — select any stop and drag the Opacity slider to 0. This generates an rgba() value for that stop, creating a smooth fade-to-transparent effect. This is perfect for hero overlays, card gradients that reveal content below, and UI depth effects.

Download SVG when you need a gradient as a standalone image file — for use in design tools (Figma, Sketch), email templates that don't support CSS, PDF generation, or as a background image. The SVG contains a proper <linearGradient> definition and can be scaled to any size without quality loss.