Random Gradient Generator

Nine gradients in one click, with CSS and PNG that don't go muddy in the middle

Every time you press New gradient or hit the Space key, the random gradient generator draws one main gradient on the large stage and eight candidates beside it. Pressing a candidate swaps it with the stage, so comparing is faster than flipping through results one at a time. Lock the colors you like with the padlock, and pick the type from linear, radial, conic and mesh, or leave it random.

What this generator pays most attention to is how colors are blended. A CSS gradient written only with HEX colors is mixed in plain sRGB for backward compatibility. That is why a gradient from blue (#0000FF) to yellow (#FFFF00) passes through gray #808080 in the middle. By default this tool gives you a CSS line that blends in OKLCH, and in front of it a line in sRGB for older browsers that don't understand it. Copy the result as CSS, or save it as a PNG at desktop or phone size.

When to use it

• Choosing a hero or banner background: In Try it out, the gradient is applied straight to a sample hero section, and the contrast numbers tell you whether white or black text will be readable on it.
• Needing a wallpaper or a slide background image: Save a gradient you like as a PNG at 1920×1080, 4K, vertical 1080×1920 and so on. You can also type a size into the width and height fields.
• Looking for a gradient that suits one brand color: Load a gradient containing that color from a link, lock it with the padlock and choose a harmony. The other colors are then set from the hue of the locked color.
• Picking colors for buttons and text accents: Gradient text, a filled button and an outlined card are shown together, so you can preview how it feels on small elements and not just on a wide background.

How to use it

1. Draw: Press the New gradient button or the Space key. Space only works when the stage is on screen and no input or button has focus.
2. Choose: Press any of the 8 candidates and it moves up to the stage, while the gradient that was on the stage moves down into its place.
3. Lock: A color whose padlock you press stays in the same position on the next draw. With Lock type and angle on, the type, angle, center and mesh point positions stay put and only the colors change.
4. Change settings: When you change the type, harmony, number of colors or tone, a new draw is made right away with that setting. The blend space and the angle slider don't redraw the colors, they only change the current gradient.
5. Take it with you: Copy CSS copies a two-line background declaration, and Copy link copies an address containing the current gradient. Save PNG renders an image at the chosen size and downloads it. The 20 most recent stay in this browser only.

How colors and shapes are drawn

Colors are chosen in OKLCH. OKLCH is Oklab, which Björn Ottosson designed to match perceived lightness and color difference, rewritten as lightness (L), chroma (C) and hue angle (H). First the harmony rule sets a hue angle for each stop, then lightness and chroma are picked within the range of the tone. Lightness flows in one direction from the first stop to the last (with ±0.03 of wobble) and the direction is random, so the gradient gets a lighter side and a darker side. If a chosen color falls outside what sRGB can display, lightness and hue are kept and only chroma is reduced.

The shape is random too. A linear gradient takes its angle in 15° steps. A radial one takes its center from 0, 25, 50, 75 and 100% on each axis, and a conic one from 25, 50 and 75%, with the start angle in 15° steps. A mesh lays the first color down as the base and places one point for each remaining color. Point positions are in 5% steps, and the spread radius is 50 to 80% of the box size. If a locked color is chromatic, its hue angle becomes the base for the rule.

Why the middle turns gray, and the blend spaces

CSS Color 4 says gradients are mixed in Oklab when no space is given, but for backward compatibility it makes colors written only in legacy sRGB notation, such as HEX, rgb() and hsl(), mix in gamma-encoded sRGB. Most gradient code is written in HEX, so in practice many gradients are mixed in sRGB. When complementary colors are mixed in sRGB, the red, green and blue values become similar in the middle, which gives gray.

The three spaces behave differently. OKLab joins lightness evenly. The middle lightness of 0.709 between blue (L 0.452) and yellow (L 0.968) is almost the average of the two, and the middle doesn't sink dark the way sRGB's 0.600 does. It still passes straight through the opposite side of the color wheel, though, so chroma drops a lot. OKLCH turns the hue angle the short way round and keeps chroma, so the middle stays vivid. The price is that a color absent from both ends shows up in the middle, like the cyan you pass through going from blue to yellow.

For each rule, 10,000 two-color gradients were drawn (Basic tone, fixed seed), and the table below counts how often the dullest point of the gradient falls below half the chroma of the stops. Complementary and split-complementary, where the hue angles are 150° or more apart, go muddy in the middle most of the time in both sRGB and OKLab, and only OKLCH avoids it. That is why this tool defaults to OKLCH, and why the strips and chroma curves under Try it out compare the three spaces on the same colors.

CSS syntax and browser support

The CSS you copy takes the form below for each type. Stop positions are left out, so CSS's default even spacing is used.

• Linear: linear-gradient(135deg in oklch, #FFC9A3, #F7849F, #A08AF0). In the CSS Images spec, 0deg points up and 90deg points right, and larger angles turn clockwise. The length of the gradient line is abs(W·sinA) + abs(H·cosA) for a box of width W and height H.
• Radial: radial-gradient(circle at 25% 75% in oklch, …). If no size is given, the end is the farthest corner from the center (farthest-corner).
• Conic: conic-gradient(from 45deg at 50% 50% in oklch, A, B, C, A). The start angle 0deg is up and it turns clockwise. The first color is repeated once at the end so that no seam appears where the circle closes.
• Mesh: The first color is the base, and for each remaining color an ellipse like radial-gradient(60% 60% at 20% 30%, #color, #color00) is stacked, ending in the same color at opacity 0. The color stays the same and only the opacity changes, so the blend space has no effect and in is not written.
• White, black and gray stops: in the OKLCH line they are written like oklch(1 0.002 264.05), with an invisible chroma of 0.002 and the hue of the neighboring color, and twice at the same position when the colors on either side have different hues. The spec lets an achromatic color take its neighbor's hue, but with chroma 0 Chrome handled the hue differently and changed the middle colors (checked on 2026-10-20).

A browser that doesn't know blend spaces drops the whole declaration containing in oklch. That is why the copied CSS puts the sRGB line first and the OKLCH or OKLab line after it. Newer browsers use the later line and older ones use the earlier line. If you swap the order, the sRGB line wins even in new browsers.

Putting text on a gradient

WCAG 2.2 Success Criterion 1.4.3 requires a contrast of at least 4.5:1 between body text and its background, and at least 3:1 for large text (18pt, or bold 14pt and above). The Understanding document has no separate rule just for gradients, and technique G18 asks you to look at the contrast between the text and the background behind it. The background color differs from place to place on a gradient, so this tool compares the stop colors and every color along the gradient line, split into 1,024 steps (for mesh, a 128-column grid plus each point center), and shows the lowest contrast for white text and for black text. For linear, radial and conic gradients the center sits inside the box, so every position on the gradient line shows up somewhere on screen; this value is therefore the lowest contrast over the whole screen at any aspect ratio. The contrast is truncated to one decimal place and judged on that value, so 4.48:1 is never rounded up to 4.5:1 to pass.

These are counts over 5,000 three-color gradients per tone (blended in OKLCH, fixed seed). The Basic tone has a wide lightness range of 0.50–0.90, so white text falls short of 4.5:1 at the light end and black text at the dark end. If the background is meant to carry text, it is quicker to draw from Pastel (black text) or Dark (white text). The sample hero gradient, peach → pink → lavender, gives 1.4:1 for white text and 7.3:1 for black text.

Saving as PNG

You can also type the width and height yourself, as whole numbers between 16 and 4096 px. The PNG is not sent to a server. The browser calculates every pixel directly. It computes the length of the linear gradient line, the radial farthest-corner, the conic angle and the mesh overlay with the same formulas as CSS, and uses the blend space you chose. A gentle gradient over a wide area in 8-bit color tends to show stair-step banding, so a small random value of ±0.5 step is added to each channel before rounding (dithering).

If the image has a different aspect ratio from the stage, the same CSS looks slightly different. For example, a 90° linear gradient (left → right) has a line as long as the box is wide, so in a 1920px-wide image the colors change more slowly than in a 1080px-wide image.

Common mistakes

• Reading the angle as a math angle: In CSS, 0deg is up. If you think of 0° as pointing right, as in math, the direction is off by 90°.
• Pasting only the OKLCH line: In a browser that doesn't know blend spaces, the whole background disappears. Keep the sRGB line in front of it.
• Swapping the order of the sRGB and OKLCH lines: The later declaration wins, so if the sRGB line comes last, the middle looks muddy even in new browsers.
• The seam in a conic gradient: If the last color differs from the first, a sharp edge appears at the 0deg position at the top. Writing the first color again at the end closes it up.
• Measuring text contrast at a single point: It may pass at the light end of a gradient and fail at the dark end. Look at the lowest value across every area where text could sit.

Limits and cautions

• Because it is random, the same settings give a different result each time. You can only get an earlier result back through a link or the 20 most recent entries, and the history is saved in this browser only (the 10 entries from the earlier version are moved over once).
• If a blended color falls outside the sRGB range, it is clipped channel by channel. If a browser fits it in a different way, the colors on screen and in the PNG can differ slightly.
• Stop positions are always even. To fine-tune stop positions or colors one by one, a CSS gradient generator is the better fit.
• Text contrast only looks at the lowest value over the whole gradient, for white and black text. Actual text position, weight, shadows and differences in color vision are not taken into account.
• PNGs can be up to 4096px on a side. On a phone, drawing a large image can take a few seconds.

Reference date The CSS specs, browser support and WCAG sources were checked on 2026-10-20. The ratios in the tables are counts made with this tool's own generation rules.

Sources

• 01W3C: CSS Images Module Level 3Section 3.1.1: 0deg points up and 90deg points right, gradient line length abs(W·sinA) + abs(H·cosA). Section 3.2: default radial size is farthest-corner
• 02W3C: CSS Images Module Level 4Blend space syntax for linear, radial and conic gradients; conic start angle 0deg is up and runs clockwise; Oklab when unspecified
• 03W3C: CSS Color Module Level 4Section 13 interpolation: legacy sRGB notation alone mixes in gamma-encoded sRGB, alpha is premultiplied, polar hue defaults to shorter
• 04Björn Ottosson: A perceptual color space for image processingDefinition of Oklab and the sRGB conversion matrices (2020-12-23)
• 05MDN: linear-gradient()Browser compatibility table: blend space support in Chrome and Edge 111, Firefox 127, Safari 16.2
• 06MDN: conic-gradient()Browser compatibility table: Chrome 69, Edge 79, Firefox 83, Safari 12.1
• 07W3C: WCAG 2.21.4.3 contrast of 4.5:1 (3:1 for large text), large text as 18pt or bold 14pt, the contrast ratio formula
• 08W3C: Understanding SC 1.4.3 Contrast (Minimum)Lists background images that do not contrast enough with the text as a failure; G18 covers the contrast between text and the background behind it

Frequently asked questions

Tools to use with it