/en/tool/gradient-generator/ works Runs in the browser.
Stops are added by clicking the bar and moved with the mouse or arrow keys; each has its own color and transparency. An existing gradient is parsed from a pasted string, multiple layers are supported, and the gray midpoint between saturated colors is fixed with OKLCH interpolation—with a fallback for older browsers. Copy it as a CSS string, variable, SCSS mixin, Tailwind class, SVG markup, or PNG image. The settings are on the left, and the gradient and ready-to-use code are on the right. They stay visible while you scroll through the settings. Below the panels, preview the gradient on text and browse a gallery of 56 sets. Everything runs in the browser; nothing is sent to the server.
On the left is the editor: the stop bar, gradient type, layers, and output format. On the right are the gradient itself and the ready-to-use code; they stay on screen while you scroll through the settings. Below the panels, preview the gradient on text and browse a gallery of ready-made presets.
Stop bar
The bar is the gradient itself. Click it to add a stop at that point. Drag the marker with the mouse, move it with the arrow keys by 0.5%, or by 5% with Shift, and remove it by double-clicking or pressing Delete. The sliders below edit the selected stop.
Layers
There can be several layers: they are combined into a single background-image value, separated by commas. Each layer has its own size, position, and repeat settings — together, they produce stripes, grids, and mesh backgrounds.
Gradient and ready-to-use code
—A gradient almost always ends up behind text, and that's where you find out that the heading is hard to read. Contrast is calculated against both the lightest and darkest points: only a combination that passes both tests works.
—
Fifty-six presets: click one to open the entire set in the editor—with its type, angle, layers, and transparency. The panel at the top immediately shows the new gradient along with its code. Your own presets are saved alongside them and remain in this browser.
Saved
The browser does the calculations. Colors and settings are never sent anywhere: after loading, the page makes no requests. Saved gradients remain in this browser’s memory and aren’t sent to the server either.
Click the stop bar where you want to add a new point. You can drag the marker afterward, or use the arrow keys: the step is 0.5%, Shift gives 5%, and Delete removes it. The result is shown in the panel on the right, which stays on screen while you scroll through the settings.
Edit the selected stop’s color in the adjacent field. You can paste #RRGGBB, eight-digit #RRGGBBAA, rgb(), rgba(), hsl(), hwb(), oklch(), lab(), or an English color name. The opacity slider sets the alpha separately. The checkerboard shows where the layer is transparent; it shows through both in the stop bar and in the preview.
If a gray band appears between two saturated colors, click “Remove gray midpoint”: the transition will use OKLCH, while the line above will contain the same transition broken into sRGB stops for older browsers.
You do not need to inspect someone else’s gradient by hand. Paste the line from their CSS into the “Paste someone else’s gradient” field — including background-image, the semicolon, and multiple layers — and click “Parse”.
You can use up to five layers. Each has its own background-size, background-position, and background-repeat. A layer sized 40 × 40 px and repeated as a tile turns a linear gradient into stripes; two such layers create a checkerboard pattern.
Below the panel, in the “How it looks with text” section, check the “Header band” view and the text color. Contrast is calculated against the lightest and darkest points of the gradient, and only a pair that passes both checks is considered valid.
The gallery below the panel contains fifty-six ready-made sets, each of which opens in the editor as a complete configuration. Your own sets can be saved with the adjacent button and remain in this browser.
You can export in six formats: a CSS rule, a single line, a CSS variable, an SCSS mixin, a Tailwind class, or SVG markup. Choose the format in the settings; the generated code appears right there in the panel on the right. “Download PNG” renders an image at the specified size, while “Gradient link” puts the entire configuration into the page URL.
linear-gradient([angle] [in color space [hue path]], color position, color position, …)
A gradient is an image, not a color. It goes in background-image, not background-color, and the element must have a size: an empty block with no height has nothing to draw. The fallback uses the cascade: two identical properties in a row, with the second one using “in oklch”. A browser that does not understand this syntax discards the entire second declaration and keeps the first; a browser that does understand it overrides the first with the second.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
In sRGB, the browser mixes colors component by component, using the numbers directly: at the midpoint, ((27+232)\/2, (90+114)\/2, (215+12)\/2) = (130, 102, 114), or #826672.
Now look at all three colors in OKLCH, where chroma is a separate value. Blue: oklch(50,9 % 0,202 262). Orange: oklch(67,9 % 0,173 51). Midpoint #826672: oklch(54,2 % 0,040 351). Chroma drops from 0.2 to 0.04 — fivefold. That is the gray band.
This happens because blue and orange lie almost opposite each other on the hue circle, while the straight line between them in the sRGB cube passes close to the gray axis, where all three channels are approximately equal.
The “in oklch” transition takes the midpoint along an arc between the hues instead of a straight line through the cube. The shortest path from 262° to 51° passes through 300° and 340°, and chroma does not drop along the way. The midpoint becomes #C047A7 — oklch(59,5 % 0,189 337), a vivid raspberry color.
The “Remove gray midpoint” button does exactly this: it switches the interpolation and keeps the short path around the hue circle. The fallback line breaks the same transition into ten intermediate sRGB stops. A browser without support will see nearly the same result, just written out explicitly.
Chroma at the midpoint rises from 0.04 to 0.189 — four and a half times higher. The output contains two lines: first the fallback “linear-gradient(90deg, #1b5ad7 0%, … #c047a7 50%, … #e8720c 100%)”, followed by the real “linear-gradient(90deg in oklch, #1b5ad7 0%, #e8720c 100%)”. The browser uses the one it understands.
Most often, the block has no height. A gradient is a background image, so it is drawn to the size of the block, and an empty div has no height. The other common cause is using background-color: gradients do not work there at all; use background-image or the background shorthand instead.
The browser mixes colors in sRGB, so the transition between saturated opposing hues passes through a dull midpoint. Click “Remove gray midpoint” — the tool switches mixing to OKLCH and adds an sRGB fallback line for browsers that do not understand this syntax. You can do the same manually: select OKLCH in the “Mixing color space” group.
Nothing: “Add a fallback” is enabled by default. The output contains two identical properties in a row — first, the transition broken into intermediate stops in sRGB, then the real one with “in oklch”. A browser without support discards the second line and keeps the first; the visual difference stays within the dithering band. “in oklch” is supported in Chrome and Edge from version 111, Safari from 16.2, and Firefox from 128.
Use the “Split: sharp edge” button. It places a second stop with the same position next to the first, collapsing the transition between them into a line. You can then assign a different color to the second stop. Build a band of the required width the same way, using pairs of stops.
Open the “Patterns” set in the gallery and see how it is built. The idea is simple: the layer has a background-size such as 40 × 40 px and repeats as a tile, so the gradient is drawn separately in each 40 × 40 cell instead of across the entire block. Two such layers with transparency, rotated relative to each other, produce a checkerboard pattern.
For overlays. A dark panel that fades from black with alpha 0.7 to transparent over a photo is the most common web gradient: it darkens the bottom of the image so a heading remains readable while leaving the top untouched. This gradient is placed as the second background over the image. The checkerboard below the preview and the stop bar shows where the layer is transparent.
Because of the value “transparent”. According to the specification, it means rgba(0, 0, 0, 0) — transparent black, so a transition from red to it passes through a semitransparent dark color. The correct approach is not to write “transparent”, but to use the same color with zero alpha: from rgba(255, 0, 0, 1) to rgba(255, 0, 0, 0). The tool does exactly that: the opacity slider changes only the alpha while the color stays the same.
A radial gradient changes color as it moves away from the center, like ripples on water. A conic gradient changes color as it moves around the center, like sectors in a pie chart. That determines their uses: radial gradients are useful for highlights, while conic gradients work well for scales and color wheels.
Nowhere. Everything is calculated in the browser; after loading, the page makes no network requests — you can see this in the developer tools. PNG and SVG files are generated here, on your device. Saved gradients are stored in this browser’s localStorage. The only thing sent over the network is what you explicitly share by link: the “Gradient link” button puts the configuration into the page URL.
To keep the preview on screen. The panel on the right is sticky: it stays in view while you scroll through the settings, but only while it remains below the viewport height. An SCSS mixin with a fallback line or SVG markup can take up a screen and a half. Without a limit, the panel would become taller than the viewport, which disables sticky positioning. That is why the listing has its own scroll area while the preview and buttons stay in place.
Calculates clamp() for a font size or spacing value between two viewport widths.
Open