Multi-Stop Color Gradient Picker

A visual gradient editor, not just a code generator

This tool is built around direct manipulation: instead of typing numbers and reading the result, you drag color-stop handles along a live preview bar and watch the gradient redraw in real time. Each handle sits at a percentage position from 0 to 100, and grabbing one updates its position the instant you let go of the mouse. That makes it ideal for the part of design that is hard to do by eye in raw CSS — getting the balance of a multi-color blend right. You can stack up to 10 stops, far beyond the two-or-three most gradients use, which is enough for rainbow sweeps, sunset bands, or carefully tuned brand fades.

The second thing that sets this apart is export breadth. The same gradient comes out three ways: a CSS declaration to paste into a stylesheet, an <svg> element with a real linearGradient or radialGradient definition, and a downloadable PNG rendered on an 800×400 canvas. So whether you need it in a stylesheet, an SVG icon, or a flat image for a slide deck or social banner, one edit produces all three.

How the export formats differ

The CSS output is the familiar background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); — a function the browser draws live, so it scales to any size with zero file weight. The SVG export is different in a subtle but useful way: SVG gradients don't take an angle, so the tool converts your angle into vector coordinates. A 135° angle becomes x1/y1/x2/y2 values computed with trigonometry so the SVG renders the exact same direction. That matters when you need a gradient inside an icon, an email (where CSS gradients are unreliable but inline SVG often works), or any vector workflow. The PNG export rasterizes the gradient onto a canvas, giving you a fixed-resolution image with no transparency — handy when a tool only accepts image files.

A worked example: building a three-stop sunset

Start from the default indigo-to-pink pair. Click Add Stop and a new stop appears near the middle; set its color to #feca57 (a warm gold) and drag it to 50%. Now lower the first stop's position handle slightly and you've created an asymmetric blend. With type set to Linear and angle 135°, the CSS becomes:

background: linear-gradient(135deg, #6366f1 0%, #feca57 50%, #ec4899 100%);

Internally the tool always sorts stops by position before writing output, so even if you drag the gold stop past the pink one, the generated CSS still lists them in valid ascending order. Prefer to skip the manual work? Open the Preset Gradients panel and click one of the 20 curated combinations — "Sunset," "Ocean," "Neon Night" — to load its stops, then fine-tune from there.

Linear versus radial in this editor

Switch to Radial and the angle control dims out, because a radial gradient expands evenly from the center of a circle and has no single direction. Linear is the workhorse for backgrounds and buttons where you want a directional fade; radial reads like a glow or spotlight emanating from the middle — good for drawing the eye to a logo or creating a soft vignette. The handles and stops work identically in both modes; only the geometry of how the colors spread changes.

Practical tips

• Avoid the muddy middle. Blending two vivid, opposite hues (bright blue straight to bright orange) passes through a dull grey because colors interpolate in sRGB. Add a brighter intermediate stop to keep the transition lively.
• Make hard edges. Put two stops at the same percentage — say both at 50% — and the blend becomes a crisp line, letting you build a two-tone split or stripes from a single gradient.
• Use three close hues for a premium look. The best-looking gradients often use three related colors rather than two distant ones; the preset "Cool Blues" and "Forest" follow this pattern.
• Reach for SVG in email. Many email clients strip CSS gradients but render inline SVG, so the SVG export is the more portable choice there.

Common mistakes

• Expecting CSS to animate the gradient itself. Browsers can't tween a gradient function. To animate, apply the PNG/SVG differently or transition background-position on an oversized gradient instead.
• Forgetting PNG has no transparency. The downloaded image is a solid filled rectangle. If you need the gradient to sit over other content with see-through areas, use the CSS or SVG output, not the PNG.
• Cramming in too many stops. The 10-stop limit is generous, but more stops rarely means a better gradient — three or four well-placed colors usually beat ten crowded ones.
• Banding on gentle fades. Very subtle transitions across a large area can show visible steps on 8-bit displays; increase the contrast between stops to hide it.