Gradient Reverser

The gradient reverser flips a linear gradient so the ramp runs the other way, mirroring every stop position and returning a declaration that renders the reverse of the original.

What is Gradient Reverser?

• The gradient reverser takes a linear gradient written as CSS and returns the same gradient running the other way.
• Paste a value into the input field and two ramps appear one above the other — the original and the reversed version.
• Beneath them, the reversed declaration is printed with a copy button, and both panels update as you type.

What the reversal actually does is more subtle than swapping two colours, and it is the reason a naive version of this tool does not work. Each stop in a gradient carries a position along the axis, and the rendering depends on those positions rather than on the order the stops are written in. Reversing the order alone leaves every position attached to its colour, so CSS sorts the stops back into place and paints the original ramp — the text changes and the picture does not. To genuinely flip the ramp, every position has to be mirrored: a stop at zero percent moves to a hundred, one at twenty-five moves to seventy-five, and so on. Then the stops are re-ordered so they read left to right again, and the output is a mirrored ramp with an ascending, readable set of positions.

This is why a tool that appears to only reverse linear gradient stops is doing more than the phrase suggests: it is inverting the ramp, not just its source text. Mirroring the positions has a consequence worth knowing about. A stop written without an explicit position is spaced automatically by the browser, and an automatic position cannot be mirrored without first deciding what it was. The tool resolves this by computing the even spacing the browser would have used — one stop gets zero, the next a hundred, and the rest divided evenly between — and then writes every position out explicitly in the output. The reversed declaration is therefore more verbose than the input, with a percentage on every stop, which is a fair trade for a result that is unambiguous.

The gradient's head is preserved. Whatever appears before the first colour — an angle, or a direction keyword such as to right, or an interpolation directive — is carried across untouched, so only the ramp flips and never the axis. The consequence is that reversing a gradient reverses its colours but not its geometry, which is what makes the tool useful for mirroring a background: a ramp that fades to dark on the left becomes one that fades to dark on the right, with the same angle, so a pair of mirrored panels can share one gradient definition.

Only the linear form is understood. A radial or conic gradient passes through unchanged, because there is no axis to mirror in the same sense, and the output would be identical to the input. Values are also read as text rather than parsed into a full colour model, so unusual notation can defeat the pattern matching even when the browser accepts it.

Where this saves time is when a gradient exists and only its direction is wrong — a hero that fades the wrong way, a card whose tint sits on the wrong side, an icon that needs mirroring for a right-to-left layout. Rather than rebuilding the gradient by hand, or hand-editing four positions and hoping the commas survived, paste it in and take the reversed declaration. As a gradient reverser it does one small job accurately, and for reverse gradient css or flip gradient direction work the difference from a simple stop-order swap is precisely the part that makes it correct. When two panels should be mirror images of each other and share their colours, being able to invert gradient colors reliably — rather than hoping the ramp flips — is the whole value.

How to use Gradient Reverser

1. Paste a linear gradient value into the input field.
2. Compare the two panels — the original above, the reversed ramp below.
3. Copy the reversed declaration, which now carries an explicit position on every stop.

When to use Gradient Reverser vs related tools

Use this when an existing gradient runs the wrong way — mirrored layouts, right-to-left interfaces, or a background that fades toward the wrong edge. Use a gradient builder when the colours themselves need changing rather than the direction. When the ramp needs rebuilding rather than flipping, the linear gradient generator is the builder, and a value written by hand that needs looking at is what the gradient previewer renders.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Gradient Reverser