ColorKitFree gradient generator
Gradient generator with the fade under your control
This gradient generator is free and needs no signup: drop up to 8 stops onto the bar, drag them where they belong, and switch between linear, radial and conic geometry while the preview keeps up. What separates it from a two-color picker is the blending space — computing the fade in CIE Lab or in linear light rather than in plain sRGB is what stops a blue-to-yellow ramp sagging through grey at the halfway mark. Whichever space you choose is resolved here and baked into all three exports: a CSS declaration, an SVG gradient definition, and a PNG up to 4096 pixels on a side.
- 100% free
- No signup
- Up to 8 stops
- 3 blending spaces
- CSS, SVG and PNG
Selected stop
Press Ctrl+V anywhere on the page to drop in a color for the selected stop — no need to click the field first.
Export
PNG
Drawn on a canvas in this tab and handed straight to your downloads folder. Anything over 4096 pixels on a side is clamped.
How to build and export a gradient
Geometry, stops, blending space — then the same ramp in three file formats.
Choose the geometry
Linear, radial or conic. Linear and conic take an angle from the slider, where 0° sends the ramp straight up and the number turns clockwise. Radial is fixed to a centered circle reaching the farthest corner — the one radial form a stylesheet, an SVG file and a canvas all draw identically, which matters because the same ramp leaves here in all three.
Place the stops
Click anywhere on the bar under the preview to add a stop; the new one arrives already holding the color the ramp had at that point, so adding a stop never changes the picture until you move it. Drag a handle to reposition it, or focus one and use the arrow keys for 1% steps and Shift with an arrow for 10%. The color field takes hex, rgb(), hsl(), any CSS name and the eight-digit form for a translucent stop. Space evenly and Reverse fix the two things people fiddle with longest.
Pick the blending space, then take it away
Switch between sRGB, linear light and CIE Lab and watch the two swatches under the buttons disagree — that comparison is the whole reason the control exists. Then copy the CSS, copy the SVG, or set a pixel size and download a PNG. Whatever space you chose is already baked into all three.
Technical specifications
| Geometries | Linear at any whole degree from 0 to 360, conic from any start angle, and a centered circle reaching the farthest corner |
|---|---|
| Color stops | 2 to 8, positioned by pointer or by arrow key in 1% steps; a new stop inherits the ramp's color at the point you clicked |
| Blending spaces | sRGB, linear light and CIE Lab; the latter two are resolved into 33 stops spaced 3.125% apart before anything is exported |
| CSS output | One background-image declaration, stop colors as 6-digit hex or 8-digit where a stop is translucent |
| SVG output | A 100×100 viewBox with preserveAspectRatio="none", objectBoundingBox coordinates, and alpha carried as stop-opacity; linear and radial only |
| PNG output | Canvas render at any size up to 4096×4096, 8 bits per channel; a conic ramp is drawn as 720 half-degree wedges so every browser writes the same file |
| Color input | Anything parseColor accepts — hex in 3, 4, 6 and 8 digits, rgb() and hsl() in both syntaxes, and the 148 CSS keywords |
| Where it runs | One page load, no network calls afterwards; the PNG is drawn by your own GPU and never leaves the tab |
Frequently asked questions
Why does my blue-to-yellow gradient go grey in the middle?
Because averaging the channels of two opposite colors lands on a neutral: halfway between #0000ff and #ffff00 in sRGB is exactly #808080. It is not a rendering bug, it is what the arithmetic says, and every renderer that blends channel by channel produces it. Switching this page to CIE Lab moves that midpoint to #ca8aaa, a dusty rose that keeps lightness climbing steadily from 32 to 97 instead of collapsing to grey on the way.
Does linear-light blending fix the dead zone too?
Not for a pair like blue and yellow — it only makes the dead spot brighter, #bcbcbc instead of #808080. Linear light undoes the gamma encoding before averaging, which is the physically correct thing to do for light and is why it looks right for glows, highlights and anything simulating exposure. It still averages three independent channels, so two colors that cancel channel for channel still cancel. Lab is the one of the three that reasons about lightness and hue instead of about red, green and blue.
Will the CSS output render exactly like the preview above it?
Yes — the preview element is styled with the same string the Copy button hands you, character for character. When the space is sRGB that string is your stops verbatim. When it is Lab or linear light the string carries 33 pre-computed stops instead, because no browser can be told to interpolate a gradient in a space of your choosing and still draw it the same way in every engine; the page resolves the ramp itself and ships the result.
Why does my exported PNG show visible stripes across a long fade?
That is banding, and it comes from 8 bits per channel: 256 steps have to cover the whole ramp. Stretch black to white across a 1920-pixel screen and each step gets 7.5 pixels of width, wide enough for the eye's edge detection to find it. Two fixes work — shorten the distance the ramp travels, or overlay a 1-2% noise texture, which is what design tools mean by dithering a gradient.
Why does my SVG export look skewed in a wide container?
Because SVG gradient coordinates default to objectBoundingBox, a unit square that is stretched to the element's real proportions along with everything painted in it. A 45° ramp exported here is 45° only while the box is square; in a 3:1 banner it flattens towards horizontal. Change gradientUnits to userSpaceOnUse and give the endpoints real coordinates when the angle has to survive any aspect ratio.
Why is there no SVG for a conic gradient?
Because SVG has no conic gradient element — the format defines linearGradient and radialGradient and stops there, in both 1.1 and 2. Tools that claim an SVG conic export are emitting hundreds of stacked wedge paths or a foreignObject, neither of which is a gradient any editor will let you edit afterwards. The PNG button stays available for conic, and the CSS is one line.
Is 8 stops a limit CSS imposes?
No — the specification puts no ceiling on the color-stop list, and this page itself emits 33 of them when you interpolate outside sRGB. The 8 is an interface limit: past that a hand-placed ramp is quicker to describe as a curve than as a list, and dragging handles that overlap each other stops being useful. If you need more, build the shape you want with a few stops in Lab and let the sampling do the rest.
About the space a gradient is blended in
A gradient is a question about the colors nobody chose. You pick the two ends; the renderer invents everything between them, and the rule it uses is almost always the dullest one available — average the red channels, average the green, average the blue. For colors that sit near each other on the wheel nobody notices. For colors that sit opposite each other the average is a neutral, and a ramp that was supposed to travel from deep blue to bright yellow spends its middle third looking like wet concrete. The pair that shows it most cleanly is #0000ff and #ffff00, whose sRGB midpoint is #808080 to the last digit. Blend the same pair through CIE Lab and the midpoint becomes #ca8aaa, because Lab carries lightness on its own axis and hue on two others, so the trip is around the grey point rather than straight through it. The same maths powers the color mixer, where you can inspect a single blend instead of a whole ramp.
Linear light is the third option and it is not a compromise between the other two. Screen values are gamma-encoded — the byte 128 emits roughly 21% of the light of 255, not 50% — so undoing the encoding before averaging is what physics would do, and it is the right answer whenever the gradient stands in for actual light: a glow, a lens flare, the falloff under a raised card. It is the wrong answer for the dead-zone problem, though, since averaging in linear light is still averaging three separate channels; blue and yellow meet at #bcbcbc there, a brighter grey rather than no grey. Knowing which of the three failures you are looking at is most of the skill, and it is why the two comparison swatches sit directly under the buttons.
Everything downstream of the ramp is geometry and file format. The CSS declaration is one line and drops into any rule that takes a background image, including under the translucent panel of a frosted glass surface or behind the elevation you tuned in the box shadow generator. The SVG is a real gradient definition with editable stops, which is what you want when the artwork goes into Figma or Illustrator rather than into a stylesheet. The PNG exists because video editors, slide decks and email clients cannot read either of the other two. If what you actually need is the CSS grammar itself — the sizing keywords, the repeating forms, the hard-stop syntax and the modern in oklch interpolation clause — that is a separate page, and it goes considerably deeper than one declaration. Layer a filter chain over the result and the same ramp becomes a duotone.
Where the ramp is computed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The PNG is the only file this page produces, and it is produced by a canvas element in this tab. There is no upload step and no render server: the bytes go straight from your GPU to your downloads folder, so a client color never appears in anyone's logs.