CSS linear gradient at 90 degrees

    Which point along the blend breaks your text? Two to eight stops in linear, radial or conic form, with contrast measured at every whole percent and a solid fallback written in.

    In CSS zero degrees points up and the angle turns clockwise, so 90 degrees is not where most drawing tools would put it. The declaration below is ready to copy, complete with the solid background colour that catches the case where the gradient image never paints. The contrast table measures white text against the blend at every whole percent, which is the check that catches a heading going invisible halfway across.

    Parameters

    Enter data for calculations

    Two to eight, hex, rgb, hsl or a CSS color name

    Every contrast figure is measured against this

    Which way the blend runs

    Where the background-color line comes from

    Form progress0 / 4 fields

    💡 Fill in all required fields to unlock the calculate button

    Two colors, and everywhere in between

    A gradient is not two colors. It is every color between them, and the ones in the middle are the ones nobody looks at. That is where a heading stops being readable, that is where a smooth blend turns muddy, and neither shows up in a preview of the two ends.

    101
    points where contrast is measured
    148
    CSS color names accepted
    8
    stops, each with its own position

    Colors go in one per line, as a hex value, an rgb() or hsl() function, or a name. Out comes a declaration with a solid fallback in front of it, a preview with sample text sitting on it, and a table saying how readable that text is at every point along the blend rather than only at the two ends.

    The three shapes, and what the geometry argument means

    All three take the same list of stops. What differs is the path the blend travels, and that path is set by the first argument, which is the one thing people copy from a snippet and never change.

    Shape First argument The blend travels Reach for it when
    Linear 135deg In a straight line across the box. 0deg runs bottom to top, and the angle turns clockwise from there. Headers, buttons, cards. Nearly always the right answer.
    Radial ellipse at top left Outward from a point. A circle keeps its shape, an ellipse stretches to the box. A glow behind a subject, a spotlight, a vignette.
    Conic from 90deg Around the center like a clock hand, so the last stop meets the first. Pie shapes, progress rings, color wheels.

    The conic case has a trap built into it. Because the sweep closes the loop, a first and last stop that are different colors meet at a hard edge on the way round. Repeating the first color as the last stop is what makes a conic gradient look continuous, and it is why the worked example below reads #ef4444 at both ends.

    Where a gradient goes wrong is never at the ends

    Take black to yellow to black, with white text on top. Both ends are black, so both ends measure 21:1, the highest contrast that exists. Anyone checking the two colors they typed would sign this off. In the middle the background is pure yellow and the same white text measures 1.07:1, which is very close to invisible.

    Black, yellow, black
    Ends 21.00:1, middle 1.07:1. Passes twice, fails everywhere it matters.
    Coral to teal, white text
    From 2.78:1 down to 1.93:1. Never passes, at any point, at any text size.
    The same one, dark text
    Worst point 6.20:1 at 26 percent. The gradient was fine, the text color was not.
    Navy to royal blue
    From 16.20:1 to 5.17:1. Clears the bar the whole way across.

    The third card is the useful one. Coral to teal is not a bad gradient. It is a bad gradient for white text, and swapping the text to a near black takes the worst point from 1.93:1 to 6.20:1 without touching either background color. That is a two second change that is invisible unless something measures the middle.

    There is a second thing the middle hides. Blending happens channel by channel, so two colors sitting opposite each other pass through gray on the way. Red to green is not red, orange, green. Halfway across it is #808000, a flat olive, because the red channel has fallen to 128 while the green has only climbed to 128. Every complementary pair does this, and it is the reason a gradient that looked bright in two swatches looks washed out on the page.

    What do you actually have to decide here?

    1. Colors - two to eight, one per line. Add a percentage after a color to pin it: #f9d423 30% puts that stop at 30 percent instead of the middle. Anything left blank is spread evenly.
    2. Shape - linear, radial or conic. This decides which of the two fields below applies.
    3. Angle - for linear and conic. Given in degrees, wrapped into range, so -45 is accepted and comes back as 315deg.
    4. Position and shape - for radial only. Circle or ellipse, anchored to a corner, an edge or the center.
    5. Text color - the color of whatever will sit on top. This is what every contrast figure is measured against, and changing it is often the fix.
    6. Fallback - which stop becomes the solid background-color underneath. Whichever end carries your text more safely is the one to pick.
    7. Read the worst point - the tile on the right of the result is the number that decides whether this ships.

    Reading the contrast column

    The four verdicts are thresholds, not opinions. They come from the WCAG contrast ratio, which compares the relative luminance of two colors and returns a number between 1 and 21. What changes between the rows is only which size of text the number is good enough for.

    Verdict Ratio What it covers Example from the runs above
    AAA 7.00 and up Any text size, with room to spare White on #800080, the midpoint of red to blue: 9.42:1
    AA 4.50 to 6.99 Any text size, the usual target White on royal blue #2563eb: 5.17:1
    Large text only 3.00 to 4.49 At least 24px, or 18.66px bold. Not body copy. White on pure red #ff0000: 4.00:1
    Fails below 3.00 Nothing. Not headings either. White on teal #4ecdc4: 1.93:1

    One detail worth knowing, because it explains a number that looks off by a hair. The ratio is computed on the color a screen actually paints, which is whole values per channel, not on the exact arithmetic midpoint. At the middle of red to blue the exact blend is 127.5 in two channels; the painted color is #800080. Measuring the exact value would print 9.46:1 next to a swatch that is really 9.42:1, so the rounding happens first and the figure matches the square beside it.

    Before you paste this into production

    Why is there a background-color line as well?
    Because a gradient is an image, not a color, and an image can fail to paint. If the declaration is not understood, or the element is printed, or a color scheme override strips backgrounds, the element falls back to whatever solid color is underneath. Without that line the answer is nothing, and light text on nothing is white on white. One extra line removes the whole failure mode.
    My gradient looks banded, in gray stripes. What is that?
    Two things, and they are separate. Gray through the middle is the blend passing through the point where one channel has fallen as far as the other has climbed, which is what turns red to green into #808000 halfway. Visible stripes are a different problem: a long, low contrast gradient has fewer than one distinct value per pixel column, so the steps become visible. A shorter distance, a bigger difference between the stops, or an extra stop in the middle all help.
    Can I put a stop before the one in front of it?
    You can type it, and CSS will not reorder your stops. It pulls the out of order one forward to sit exactly on its predecessor, which produces a hard edge rather than a blend at that point. The tool does the same thing so the sampled colors stay honest, and says in the notes that it happened, because a hard edge you did not ask for looks like a rendering bug.
    What happens to a translucent color?
    It goes into the CSS exactly as you wrote it, because that is what you want on the page. It cannot be measured for contrast the same way, though, since what shows through depends on whatever sits behind the element and the tool cannot know that. So a translucent stop is composited over white before the ratio is taken, and the notes say so. Treat those rows as the best case: over anything darker, contrast with light text gets worse.
    Which angle is 0, and which way does it turn?
    In CSS, 0deg points up, so the gradient runs from the bottom edge to the top, and the angle increases clockwise. That makes 90deg run left to right and 180deg run top to bottom. It catches people out because it is the opposite of the convention in most drawing tools, where zero points right.
    Does the tool accept color names, and are they exact?
    All 148 CSS color names are accepted, including the awkward ones like rebeccapurple and cornflowerblue, plus the transparent keyword. The values are not typed from memory: the table is generated from a package that ships the specification list, and the test suite compares every entry against that package on each run, so a hand edit to the table fails the build rather than shipping a wrong shade.
    Why was my color rejected when it looked fine?
    Because the check is strict on purpose. A value like rgb(999,999,999) looks like a color and is not one, and a browser handed that does not clamp it or warn you, it drops the whole declaration and leaves the element with no background at all. Channels have to sit in 0 to 255, saturation and lightness in 0 to 100 percent, alpha in 0 to 1, and a hex value has to have 3, 4, 6 or 8 digits. The message names which rule the value broke rather than saying invalid.

    Related tools

    URL Slug Generator

    The address of the page this gradient sits at the top of, with the duplicates caught first - Open the tool

    Random Name Generator

    People to fill the cards and avatars sitting on that background while the copy is still being written - Open the tool

    Color Generator

    Picks the two ends when you have no palette yet, in hex, rgb and hsl at once - Open the tool

    SEO Meta Tag Generator

    Writes the theme-color and og tags that sit in the head of the same page - Open the tool

    Table Generator

    Turns a pasted range into Markdown or HTML for the content below the header - Open the tool

    QR Code Generator

    A symbol for the printed version, where the same contrast argument decides whether it scans - Open the tool

    UUID Generator

    Identifiers for the components and theme records this style ends up attached to - Open the tool

    See also

    CSS radial Gradient Generator With a Contrast CheckCSS conic Gradient Generator With a Contrast CheckCSS Gradient at 45 Degrees - Code and Contrast CheckCSS Gradient at 135 Degrees - Code and Contrast CheckCSS Gradient at 180 Degrees - Code and Contrast Check

    Generator verified by the LiczGrupa.pl team

    Content, formulas and results have been reviewed for accuracy and relevance by our team of specialists.

    Natalia Skrzek

    Reviewed by: Natalia Skrzek

    Related topics

    css gradient generator
    gradient generator
    linear gradient css
    how to make a css gradient
    what angle is 0 in a css gradient
    why does my gradient look gray in the middle
    how to add a fallback color for a gradient
    conic gradient css example
    radial gradient ellipse at top left
    gradient with three color stops
    background image vs background color gradient
    white text on a gradient contrast ratio
    is my heading readable on a gradient background
    css gradient banding stripes fix
    rgb values out of range are ignored by the browser