CSS Gradient Generator

CSS DESIGN DEVELOPER VISUAL

By AI Tools Desk Checked against sources by Jeffrey Tan, Founder & Architect, RECATOOLS Last reviewed 13 Sep 2026

About this tool

Generate CSS gradient code visually

Build linear and radial CSS gradients visually. Up to 6 colour stops, angle picker, presets, live preview, and one-click copy. Free.

RT-DEV-050 · Developer Tools

Angle 135°

Colour stops

CSS

Presets

📅 Research current as of 13 Sep 2026 · Sources: CSS Images Module Level 3 (W3C Candidate Recommendation Draft, 18 December 2023) for the gradient line, the 0deg-points-up angle rule, colour-stop fixup and the farthest-corner default; CSS Images Module Level 4 Editor's Draft for conic-gradient() and the in <colour-space> interpolation argument

Standards, published formulas, and reference data are revised over time — check against a current authoritative source before relying on these figures.

How to Use the Generator

Pick a type

Choose Linear for directional gradients or Radial for circular spotlights.

Adjust your colour stops

Click any stop to change its colour. Drag the position slider to reposition. Add up to 6 stops.

Set angle or shape

For linear gradients adjust the angle slider; for radial choose shape and position.

Copy the CSS

The generated code updates live. Click Copy CSS to grab it for your stylesheet.

About CSS Gradients

A CSS gradient is an image the browser computes, not a file it downloads. This generator writes the two types defined in CSS Images Module Level 3: linear-gradient(), whose colours run along a gradient line set by an angle, and radial-gradient(), whose colours run outward from a centre point to an ending shape. A third type, conic-gradient(), sweeps colour around a centre point and is defined in Level 4 — this page does not emit it, so if you need one you will be hand-writing it.

Angles follow the Level 3 rule exactly: 0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right. That is not the convention used in trigonometry or in most drawing software, and it is the usual reason a gradient comes out mirrored when it is copied between tools. The radial output here names a shape (circle or ellipse) and a position but no size keyword, so the ending shape takes the spec default: <radial-size>, if omitted it defaults to farthest-corner — the gradient finishes at whichever corner of the box is furthest from the centre, so the same declaration looks different in a wide box and a tall one.

What the generated declaration pins down, and what it leaves to the browser

Every stop this page writes carries an explicit percentage, and the stops are sorted into ascending order before the declaration is assembled. That matters because of a rule most authors meet only as a bug: Level 3 colour-stop fixup says that a stop positioned before an earlier one must have its position set… to be equal to the largest specified position of any color stop or transition hint before it. Nothing is reported; the stop simply moves and a hard edge appears. Output from this page cannot trigger it, but hand-edited output can — the spec's own example is linear-gradient(yellow 100px, blue 50%), which is well-behaved while the box is at least 200px tall and snaps at 150px, where the blue stop resolves to 75px and is corrected back to 100px.

Colours come from the browser's native colour input, so they are always opaque six-digit sRGB hex. Two consequences follow. The premultiplied-alpha interpolation the spec applies between stops is not observable in anything produced here, because nothing produced here is translucent. And the declaration carries no <color-interpolation-method>: Level 3 offered only gamma-encoded sRGB, which the Level 4 draft itself calls clearly too dark at the midpoint in its worked example of #f01 to #081. Level 4 adds the space as an argument — linear-gradient(in oklab, #f01, #081) — and states that with no method given, the color space used for gradient interpolation is the default interpolation color space, Oklab. A gradient written in plain hex, as this one is, is the case engines still render down the sRGB path, so the perceptually even version is something you ask for by name.

One accessibility point, because it is a measurable constraint rather than general caution: a gradient's lightness varies across its own surface, so text laid over it has a different contrast ratio at each end. WCAG 2.2 success criterion 1.4.3 requires 4.5:1 for normal-size body text, and that has to hold at the lightest point the text actually touches — an average across the gradient proves nothing.

Gradient-line rules in the CSS spec, and the defaults this generator leans on

0deg points up, not right. CSS Images Level 3: 0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right. The angle slider on this page is in those degrees, which is why 135° reads as a top-left to bottom-right sweep.

to bottom right is not 45°. A corner keyword must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners. In a non-square box that is a different angle from 135deg, so the two are interchangeable only in a perfect square.

An out-of-order stop is moved without warning. Fixup: a stop earlier than one before it has its position set… to be equal to the largest specified position of any color stop or transition hint before it. This page sorts stops first, so its own output never hits the rule.

Mixing px and % can trigger that fixup as the box resizes. The spec's example: linear-gradient(yellow 100px, blue 50%) is smooth while the box is 200px tall; at 150px the blue stop resolves to 75px, falls before yellow, and is corrected to 100px — a hard edge that appears only at certain widths.

Two stops at one position is the documented way to get a hard edge. If multiple color stops have the same position, they produce an infinitesimal transition from the one specified first in the list to the one specified last. That is the spec sanctioning the stripe trick, not a hack around it.

The default interpolation space changed between spec levels. Level 3 interpolated only in gamma-encoded sRGB. Level 4 adds in <space> and says that with none given the space is the default interpolation color space, Oklab. Plain-hex gradients like this page's still render down the sRGB path in shipping engines.

Leave out the size keyword and you get farthest-corner. <radial-size>: If omitted it defaults to farthest-corner. The radial output here omits it deliberately, so the gradient always finishes at the far corner of whatever box you paste it into.

Shape has a default rule of its own. With <radial-shape> omitted, the ending shape defaults to a circle if the <radial-size> is a single <length>, and to an ellipse otherwise. This page always writes the shape out, so the rule never has to be guessed at.

Colour past the end stop does not fade out. Before the first color stop, the gradient line is the color of the first color stop, and after the last color stop, the gradient line is the color of the last color stop — and the interpolation method has no effect on those regions. A stop at 80% means flat colour across the last fifth.

Conic is the youngest of the three, and it is everywhere. Per the support data carried in the Level 4 draft, conic-gradient() ships in Chrome 69+, Safari 12.1+ and Firefox 83+; linear-gradient() goes back to Chrome 26, Firefox 16 and Safari 7. Neither needs a vendor prefix.

Frequently Asked Questions

linear-gradient() runs its colours along a gradient line set by an angle; radial-gradient() runs them outward from a centre point to an ending shape; conic-gradient() sweeps them around a centre point. The first two are CSS Images Module Level 3 and are what this generator writes. Conic is Level 4 — it ships in every current engine (Chrome 69+, Safari 12.1+, Firefox 83+) but you will have to write it by hand.
Six on this page. CSS itself sets no limit — <color-stop-list> takes as many as you write. The cap here is about the control surface, not the language: past six, dragging position sliders stops being a usable way to place a stop and editing the declaration directly is quicker. Whatever you build, the page writes every stop with an explicit percentage and in ascending order.
It sets the direction of the gradient line, in the degrees CSS Images Level 3 defines: 0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right. So 0deg runs bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. Corner keywords such as to bottom right are not equivalent to 45deg unless the box is square — the spec angles them perpendicular to the line joining the two neighbouring corners.
Universal, and prefix-free, for what this tool emits. The support data carried in the CSS Images Level 4 draft records linear-gradient() and radial-gradient() in Chrome 26+, Firefox 16+, Safari 7+, Opera 12.1+, Edge 79+ (legacy Edge 12+) and IE 10+. conic-gradient() is newer: Chrome 69+, Safari 12.1+, Firefox 83+. The in <colour-space> interpolation argument is the one part of the gradient syntax new enough to want checking against your own support target.
Yes, with no attribution and no restriction from us. What you get back is a declaration you described yourself using the slider and the colour inputs — we add no watermark and set no condition on its use. Nothing you build here is transmitted anywhere: the preview, the declaration and the presets are all computed in your browser.
Because a plain-hex gradient is interpolated in gamma-encoded sRGB, which is neither linear-light nor perceptually uniform. CSS Color 4 is blunt about the trade: sRGB is the choice for legacy compatibility even though it produces poorer results (overly dark or greyish mixes). The Level 4 gradient draft shows the same pair of colours (#f01 to #081) rendered three ways and describes the sRGB one as clearly too dark at the midpoint. The fix is to name a space: linear-gradient(in oklab, #f01, #081), or in oklch if you want the transition to hold its chroma rather than dip through grey. This page does not add the argument for you — paste it in yourself once you have the stops you want.
Set the gradient as the background, clip it to the glyph shapes, and make the text itself transparent: background: linear-gradient(45deg, #E8472F, #1D4ED8); -webkit-background-clip: text; background-clip: text; color: transparent; Keep the prefixed line as well as the unprefixed one — the unprefixed background-clip: text is the standardised form but the prefixed property is what older Safari and Chrome builds recognise. Give the element a real color fallback if the gradient might fail, or the text disappears.
Not by transitioning the gradient itself in any shipping engine — background-image between two gradient values is the trap almost everyone hits first. Two things do work. Register the varying part as a typed custom property with @property (CSS Properties and Values API Level 1), which gives the browser a type it knows how to interpolate, then animate that property. Or build a gradient larger than its box and animate background-position, which is a plain animatable length pair and needs no new syntax.
They can be, but the check is per-point rather than per-background. WCAG 2.2 success criterion 1.4.3 (Contrast Minimum) requires 4.5:1 for normal-size text and 3:1 for large text, and a gradient changes lightness across its own surface — so the ratio has to be measured at the lightest point the text overlays, not at the midpoint or on average. Hero gradients commonly pass at one end and fail at the other. Our WCAG contrast checker will do the arithmetic on a specific pair.
A CSS gradient is generated by the renderer at whatever size the box turns out to be, so it costs no extra request, has no fixed resolution to outgrow, and is edited by changing text. A raster image still wins when the source is photographic or hand-painted — anything whose detail cannot be described by a handful of colour stops. The practical test is whether you can express the design as a stop list at all: if you can, CSS will reproduce it exactly at every display density; if you cannot, no number of stops will get you there.

Related News

You may be interested in these recent stories from our newsroom.

View all news →

Method & sources

How it computes

Assembles a CSS Images Module Level 3 declaration: linear-gradient(<angle>deg, …) or radial-gradient(<shape> at <position>, …). Every stop is written with an explicit percentage and sorted ascending, so the spec's colour-stop fixup can never fire on this output; the radial form omits <radial-size>, taking the spec default of farthest-corner. No <color-interpolation-method> is written, so the result renders in gamma-encoded sRGB.

What this tool implements

Angles are CSS Images Level 3 gradient-line degrees: '0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right' — not the trigonometric convention, which is why a gradient copied between tools often comes out mirrored.
Corner keywords are NOT emitted, and the page says why: 'to top left' style keywords 'must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box', so they equal 45deg only in a square box. The tool writes a numeric angle instead.
Colour-stop fixup (Level 3): a stop positioned before an earlier one has its position 'set… to be equal to the largest specified position of any color stop or transition hint before it', silently. The tool sorts ascending and writes percentages only, so its output cannot trigger it; the page names the rule because hand-edited output can.
radial-gradient() output names <radial-shape> and a position but no <radial-size>, which 'if omitted… defaults to farthest-corner' — so the same declaration renders differently in a wide box and a tall one. The page states this rather than leaving it implicit.
No <color-interpolation-method> is written. Level 3 offered only gamma-encoded sRGB; the Level 4 draft states that with no method given 'the color space used for gradient interpolation is the default interpolation color space, Oklab'. A plain-hex gradient is the case shipping engines still render in sRGB, so 'in oklab' is something the reader must add by name — the page says so instead of implying perceptual uniformity it does not deliver.
Stops come from <input type="color">, which yields opaque six-digit sRGB hex only. Nothing produced here is translucent, so the premultiplied-alpha interpolation the spec applies between stops is unobservable in this tool's output — stated on the page rather than omitted.

Sources

CSS Images Module Level 3, W3C Candidate Recommendation Draft, 18 December 2023 — gradient-line angles, corner-keyword geometry, colour-stop fixup, <radial-shape>/<radial-size> defaults, the before-first/after-last stop rule and the infinitesimal-transition rule for coincident stops: https://www.w3.org/TR/css-images-3/
CSS Images Module Level 4, W3C Editor's Draft — conic-gradient(), the in <color-interpolation-method> argument, the Oklab default, and the #f01→#081 worked example in which the gamma-encoded sRGB rendering is 'clearly too dark at the midpoint': https://drafts.csswg.org/css-images-4/
CSS Color Module Level 4, W3C Candidate Recommendation Draft, 13 September 2026 — the interpolation-space trade-off: sRGB is the choice for legacy compatibility 'even though it produces poorer results (overly dark or greyish mixes)': https://www.w3.org/TR/css-color-4/
Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation — success criterion 1.4.3 Contrast (Minimum), 4.5:1 for normal-size text and 3:1 for large text, the per-point constraint the page applies to text over a gradient: https://www.w3.org/TR/WCAG22/
CSS Properties and Values API Level 1 — @property, the registration that gives a custom property a type the engine can interpolate (the working route to an animated gradient): https://www.w3.org/TR/css-properties-values-api-1/

What can make this go out of date

None at runtime. Everything is computed in the browser; the page makes no network request and nothing you build is transmitted.
The browser-support figures quoted in fact 10 and the support FAQ are the MDN browser-compat data carried in the CSS Images Level 4 Editor's Draft, read on 2026-09-13; they move as engines ship.

Abridged — the full review record for this tool runs longer than the list above.

CSS Gradient Generator