ColorKitFree CSS gradient generator
CSS gradient generator for every gradient function
Free and without a signup, this generator writes the CSS rather than the colors: all six gradient functions, angles in any of the four CSS units, the eight side-and-corner keywords, both ending shapes with all four radial sizing keywords, and the two stop grammars people look up most — the double-position hard stop and the bare-percentage interpolation hint. Pick a modern interpolation space and the output arrives as two background-image declarations, legacy first, because a browser that cannot parse in oklch drops the whole line rather than part of it. Whether yours can is tested in your browser and reported above the code.
- 100% free
- No signup
- 6 gradient functions
- 4 angle units
- Fallback line included
This browser parses in oklch, so the preview above is the second declaration.
How to write a CSS gradient
Function, prelude, stops — the three parts of the grammar, in the order the value is parsed.
Choose the function
linear-gradient, radial-gradient or conic-gradient, and tick the repeating- prefix if the pattern should tile. Ticking it changes what the stop positions mean: they stop being places along the whole box and become places inside one band, so the generator re-expresses them in pixels against the band length you set. A repeating gradient with percentage stops that reach 100% has nothing left to repeat.
Write the prelude
This is the part before the first comma and it differs per function. Linear takes either an angle — in deg, grad, rad or turn, all four of which the generator will emit — or one of the eight side-and-corner keywords. Radial takes an ending shape, one of four sizing keywords, and a centre. Conic takes a start angle and a centre. The read-out under the slider names the keyword your angle would equal on a square box, which is not the same as the keyword on a rectangle.
Set the stops and the interpolation clause
Give each color a position, or turn on hard stops to emit the double-position form that produces an edge with no fade at all. The hint slider inserts a bare percentage between two colors, which shifts the halfway point of the blend without adding a color. Finally choose an interpolation space; the output then carries two background-image lines, and the read-out tells you whether the browser you are using right now parses the second one.
Technical specifications
| Functions emitted | Six — linear-gradient, radial-gradient and conic-gradient, each with its repeating- counterpart |
|---|---|
| Angle units | deg, grad, rad and turn, converted as you switch: 90deg is 100grad, 1.5708rad and 0.25turn |
| Direction keywords | All eight side-and-corner forms, each shown with the angle it matches on a square element |
| Radial variants | Two ending shapes against four sizing keywords, plus a centre anywhere on a 0-100% grid; the browser default is an ellipse sized to the farthest corner at 50% 50% |
| Stop grammar | Three forms — a single position, the double-position hard stop, and a bare-percentage interpolation hint, which the fixup rules clamp onto a neighbor if it strays past one |
| Repeating bands | Stop positions re-expressed in pixels against a band of 2 to 400px, since a percentage band that spans the box cannot tile |
| Interpolation clause | Seven color spaces — srgb, srgb-linear, lab, oklab, lch, oklch and hsl — with four hue directions available on the three polar ones |
| Fallback strategy | Two background-image declarations, the legacy one first; support for the second is probed live with CSS.supports() rather than assumed from a version table |
Frequently asked questions
Which way does 0deg point in a CSS gradient?
Straight up, with increasing angles turning clockwise — 90deg goes to the right, 180deg down. This trips people up because almost nothing else in graphics agrees: the mathematical convention puts 0 along the positive x-axis and turns counter-clockwise, canvas measures from the same x-axis, and SVG gradients do not take an angle at all, only two endpoint coordinates. Any of deg, grad, rad and turn is legal here, so 0.25turn is a perfectly valid way to say 90deg.
Why is “to bottom right” not the same as 135deg?
Because a corner keyword adapts to the box and an angle does not. The specification places the gradient line so that the line through the other two corners is perpendicular to it, which means the resulting angle depends on the element's proportions: in an 800 by 200 pixel banner the keyword works out at 166deg, barely off vertical, rather than 135deg. On a square they coincide, which is why the difference stays hidden until a layout resizes. Use the keyword when the ramp should always finish in the corner, and the angle when the direction must not move.
How do I get a hard edge between two colors with no fade?
Give the two colors the same position, or use the double-position syntax the hard-stop toggle emits: #4f46e5 0 40%, #ea580c 40% 100% puts the boundary exactly at 40% with no blend either side. Double positions arrived in Chrome 72 and Safari 12.1 in 2019 and in Firefox 83 in 2020, and they are simply shorthand — writing each color twice with two positions does the same thing in older parsers. This is the syntax behind CSS stripes, progress bars and the two-tone splits people otherwise reach for an extra element to build.
What is the bare percentage sitting between two colors?
It is an interpolation hint, and it is not a color stop — it moves the point at which the blend is halfway done. Write #000 0%, 25%, #fff 100% and the exact midpoint mixture lands at 25% of the way across instead of 50%, with an exponential curve fitted either side of it. Push it past one of its neighbors and nothing errors — the color-stop fixup rules drag it back onto that neighbor's position, and the fade collapses into an abrupt edge, which is a confusing way to discover a typo. It is the cheapest way to stop a gradient looking top-heavy without inventing a third color.
Why did my repeating-linear-gradient come out as one flat color?
Because the first and last stop ended up at the same position, and the specification says a repeating gradient with zero length between them renders as the average color of its stops. It usually happens when percentages get copied over from a non-repeating gradient: 0% to 100% leaves no band to repeat, and 0% to 0% leaves nothing at all. Give the band a real length — the generator writes the stops in pixels for exactly this reason — and the tiling appears.
Why does the whole background disappear when I add “in oklch”?
Because a value a browser cannot parse makes the entire declaration invalid, and an invalid declaration is dropped rather than partially applied. There is no half-understood gradient; the element simply has no background image. That rule is also the fix: write the plain declaration first and the modern one immediately after, and an old parser keeps the first while a new one overwrites it with the second. Gradient interpolation spaces shipped in Safari 16.2 in December 2022, Chrome and Edge 111 in March 2023 and Firefox 128 in July 2024, so the fallback line still earns its place.
Can I transition or animate a gradient?
Not directly — background-image is not an animatable property, so a transition on it snaps rather than fades. Three things do work: cross-fade two stacked elements with opacity, animate background-position on an oversized repeating gradient to make it travel, or register the colors as custom properties with @property and a color syntax, which makes those properties animatable so the gradient rebuilds itself every frame. The last one is the only approach that genuinely tweens the colors.
About CSS gradient syntax
Almost every confusing thing about a CSS gradient comes from one design decision: the value describes a line, not a picture. The prelude positions that line, the stops distribute colors along it, and the renderer then paints every pixel of the box with the color of its perpendicular projection onto the line. Once that is clear, the odd behaviors stop being odd. An angle rotates the line but leaves its length computed from the box, so the ramp always spans corner to corner. A corner keyword refuses to commit to an angle at all and re-derives one whenever the element resizes — in an 800 by 200 banner the to bottom right that read as 135deg on a square swings round to 166deg. And a radial gradient replaces the line with a shape, which is why it needs a sizing keyword: the default is an ellipse stretched to the farthest corner, and switching to closest-side is usually what people mean when they say the glow is too big.
The second half of the grammar is the stop list, and it holds two features that quietly replace whole techniques. Double positions turn a gradient into a shape tool: two colors meeting at one percentage give a hard edge, so stripes, ribbons, two-tone splits and even a pointed wedge become a background rather than an extra element. That overlaps with what the border-width triangle trick and the clip-path polygon do, with the difference that a gradient paints instead of cutting, so it composes with a border and a rounded corner rather than fighting them. The other feature, the interpolation hint, is a single bare percentage between two colors that relocates the halfway mixture: it is what to reach for when a fade behind a heading looks front-loaded and adding a third color would be overkill.
The newest part of the syntax is the interpolation clause. Writing in oklch after the prelude asks the browser to blend in a perceptual space instead of in raw sRGB, and adding longer hue sends the hue the long way round the wheel — two stops and a rainbow, no third color required. Support is recent enough that the fallback declaration is not optional, which is why this page emits two lines and checks the second against your own engine instead of trusting a version table. When the goal is a ramp whose interpolation is settled before it reaches the stylesheet — or one you also need as an SVG or a PNG — the gradient builder resolves the blend itself and hands over stops that need no clause. Either output drops into the surface of a generated button, where the label above it is worth re-checking with a text shadow once the background stops being a flat color.
Where this CSS is written
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 one thing this page does read about your machine is a capability, not an identity: CSS.supports() is asked whether your engine parses the value being generated, and the answer is used to label the preview and nothing else.