Build a multi-stop linear or radial gradient and check text contrast against every stop color before you ship it. That's the check a plain gradient generator won't run for you. Export as CSS or a Tailwind arbitrary-value class.
LINEAR active
Preview your gradient with the selected text color.
White · Stops
6.70:1
4.5:1+
Black · Stops
1.18:1
<3:1
Custom · Stops
6.70:1
4.5:1+
These ratios are the minimum across authored color stops only. Threshold labels show ratio bands, not WCAG conformance; final text must be checked against the rendered gradient behind the text.
background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1D4ED8 100%); color: #FFFFFF;
className="bg-[linear-gradient(135deg,_#0F172A_0%,_#1E3A8A_50%,_#1D4ED8_100%)] text-[#FFFFFF]"
White, Black, and Custom each show the lowest contrast ratio against your chosen stop colors, not an average. It's the worst case, because that's the one that actually determines whether text is readable. A single low-contrast stop can drag the result down even if every other stop contrasts fine. Custom uses the text color set in Foreground Analysis, so you can check your actual brand color instead of just white or black.
A simple two-color background gradient only needs an angle and two stops. This tool is built for the harder case: three or more color stops with independent positions, where it's genuinely easy to lose track of whether text stays readable across the whole span. That's exactly the check most gradient generators skip. Move stop positions to change where each color appears; stops are ordered by percentage in the exported CSS, and at least two must remain. Choose Linear for an angle or Radial for a center position.
Copy CSS exports a standard background declaration for a stylesheet. Copy TW exports the same gradient as a Tailwind arbitrary-value class (bg-[linear-gradient(...)]) for projects that don't keep a separate CSS file at all. Both describe the background only. Apply your checked text color separately once you've confirmed it holds up.
The ratios only sample the colors you've explicitly set, not every pixel a browser interpolates between them. Text can dip below a safe contrast level in the blended zone between two stops that individually passed. Treat a good ratio here as a strong signal, not a guarantee, and glance at the rendered gradient directly behind your actual text before shipping it.
A contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (pure black against pure white). WCAG sets three thresholds that this tool's contrast bands are built around: 3:1 is the minimum for large text (roughly 18pt or 14pt bold) at the standard AA level, 4.5:1 is the minimum for normal body text at AA, and 7:1 is the stricter AAA level for normal text. A ratio under 3:1 is not a borderline case; it's the range where many readers, not just people with low vision, will find the text genuinely hard to read.
| Ratio | What it satisfies |
|---|---|
| 7:1 or higher | AAA for normal text, AA and AAA for large text |
| 4.5:1 to 7:1 | AA for normal text, AA and AAA for large text |
| 3:1 to 4.5:1 | AA for large text only, fails AA for normal text |
| Under 3:1 | Fails every level for every text size |
Take the Solaris preset, a dark brown-to-orange-to-yellow linear gradient. Checked against white text, its three stops score 9.37:1, 3.56:1, and 1.53:1. The overall white contrast this tool reports is 1.53:1, driven entirely by the bright yellow stop at the end, even though the dark brown stop at the start would support white text at nearly AAA level on its own. Checked against black text instead, the ranking flips: the same yellow stop scores 13.71:1, comfortably passing, while the dark brown stop drops to 2.24:1 and becomes the new failure point.
Neither text color clears AA across the whole gradient. That's not a rare case, it's the normal outcome for any gradient that spans from dark to light: a single text color is fighting the color furthest from it in luminance, wherever that stop happens to sit. Compare that with the Deep Sea preset, which runs from near-black to a saturated blue. Its lowest white-text ratio across all three stops is 6.70:1, comfortably past AA and just short of AAA, so white text holds up everywhere along that gradient. Black text on Deep Sea, by contrast, tops out at 1.18:1 at the darkest stop, unusable at any size.
The lesson generalizes: a gradient built from a narrow luminance range (all dark, or all light) usually has one safe text color across every stop. A gradient that spans from dark to light rarely does, no matter which single color you pick.
If one stop is dragging the minimum ratio down, three fixes are more useful than switching text color and hoping: darken or lighten just that stop's lightness value while keeping its hue, since a small lightness shift often clears the threshold without visibly changing the gradient's character. Move that stop's position away from wherever your text actually sits, if the layout allows it, since the ratio only has to hold where content is placed on top, not across the entire gradient. Or add a solid, semi-opaque scrim behind the text, which sidesteps the problem by putting a consistent, checkable color directly behind the words instead of relying on the gradient itself to carry contrast.
Related Tools
Build and preview common CSS Grid layout patterns.
Remove, replace, and export image metadata.
Generate and inspect solid background-color declarations.
Generate gradient and image background-image CSS.
Generate uniform or side-specific CSS border declarations.
Generate uniform, corner, and elliptical border-radius CSS.