Build layered CSS gradients with free-form stops, OKLCH interpolation and export to CSS, Tailwind, SCSS or PNG.
A CSS gradient is an image the browser generates on the fly to blend two or more colors smoothly, with no file involved. This tool builds the three types in the specification: linear-gradient(), which follows a direction set by an angle in degrees; radial-gradient(), which radiates from an adjustable point as a circle or an ellipse; and conic-gradient(), whose colors sweep around a center like the sectors of a clock. Each color is a stop with a position in percent and its own opacity, and you can add, remove, drag or reorder as many stops as you need, with the keyboard or the mouse. Because the background-image property accepts several gradients separated by commas, you can stack layers: the first value paints on top, and layers with translucent stops let the ones below show through. You can also pick the interpolation space (the modern in oklch, in oklab, in hsl syntax), which is what avoids the washed-out gray band in the middle of transitions between complementary colors. In the output CSS the angle works like a clock: 0deg points up, 90deg points right, 180deg points down, different from the mathematical convention. Use gradients to add depth, light backgrounds and highlights without loading images, always remembering that the shifting color can undermine the contrast of any text placed over it.
The base syntax is background-image: <type>-gradient(<direction>, <color> <position>, ...). In a linear gradient the direction is an angle: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%) runs from the top-left toward the bottom-right. The angle follows a clock, 0deg is up, 90deg is right, not the mathematical convention, which is a common source of confusion when starting out.
A radial gradient uses radial-gradient(circle farthest-corner at 50% 50%, ...) and spreads colors out from the chosen center, with a shape (circle or ellipse) and one of the four sizes in the spec; a conic gradient uses conic-gradient(from 0deg at 50% 50%, ...) and lays colors around the center point, ideal for gauges and progress rings. All three have a repeating- variant that tiles the span between the first and last stop, which is how stripes and checkers are made.
With nothing declared, the browser interpolates in sRGB, channel by channel. Between two saturated complementary colors that path cuts through the middle of the color cube and produces a washed-out midpoint: blue to yellow, for instance, crosses a mid gray before reaching the other side. CSS Images 4 lets you declare the space inside the function itself, as in linear-gradient(90deg in oklch, blue, yellow).
OKLab and OKLCH are perceptually uniform spaces: the same numeric distance corresponds roughly to the same perceived difference, so the blend keeps its saturation and does not sag in lightness halfway through. In polar spaces (OKLCH and HSL) you can also choose the hue direction, with the shorter hue, longer hue, increasing hue and decreasing hue keywords. It is longer hue that turns a conic gradient with two stops of the same color into a full rainbow, because it forces the blend to travel all the way around the hue circle.
The background-image property accepts several comma-separated values, and the first one is painted on top. That stacking is what produces the more interesting backgrounds: a translucent colored radial over another radial in a different corner, over a solid base, is the recipe behind the mesh-style backgrounds common in modern interfaces.
For the lower layers to show, the ones above need transparency, written as an eight-digit hex (#RRGGBBAA) or set per stop. You can also combine layers with background-blend-mode, which applies multiply, screen, overlay or difference between them, and set a background-color as the solid backdrop under everything.
Gradients suit heroes, buttons, cards, progress bars and overlays that add depth at no network cost, since the browser computes them and they stay sharp at any resolution. When the destination cannot take CSS (a post cover, a slide, an email), export the same gradient as a PNG and use the image.
The thing to watch is text on top: across a gradient the luminance changes point by point, so a text color that passes contrast over one end can fail at the other. The WCAG guidelines call for at least 4.5:1 for normal text and 3:1 for large text; check the contrast against both the lightest AND the darkest part of the gradient, or add a semi-transparent layer to even out the background under the text.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/gradient-generator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gradient Generator"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Yes. It builds the three types defined in the CSS specification, linear-gradient(), radial-gradient() and conic-gradient(), plus the repeating- variant of each, and hands you code that is ready to paste. You control the angle, the center, the shape and the size, add as many stops as you like and adjust the color, position and opacity of each one.
background-image: linear-gradient(135deg, #3DDC97 0%, #2563EB 100%);The CSS and the PNG are generated locally in your browser.