What angle should a linear gradient use?

0deg points up, 90deg points to the right, and 180deg points down. 135deg is a common diagonal. Pick the angle that matches where the light or the headline sits, then set stop positions instead of leaving them to the browser.

How do I keep text readable on a linear gradient?

A gradient is many backgrounds. Check the lightest and darkest points under the text in the contrast checker. WCAG 2.2 Success Criterion 1.4.3 needs 4.5:1 for normal text and 3:1 for large text where it applies. If a region fails, move the type onto a solid card.

Why does the middle of a two-stop linear gradient look gray?

sRGB interpolation between distant saturated hues often passes through a dull color. Add a middle stop, or interpolate in a different space. The CSS gradients guide and gradient stop guide walk through both.

Can I print a linear CSS gradient?

A continuous blend is a screen paint. For press, extract the stops that matter and check those flat colors in the print gamut checker or the HEX to CMYK converter. The CMYK values are a reference, not a press proof.

Linear Gradient Generator — Free CSS Tool

Gradient type

Angle: 90°

Color stops

Position: 0%

Position: 50%

Position: 100%

Presets

CSS

background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: -webkit-linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: linear-gradient(90deg, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);

Import colors from the palette generator. Bright RGB gradients may shift in CMYK print — verify before production.

Color tools

Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.

View all tools →

How a linear gradient is built

linear-gradient() paints along a gradient line. You choose the direction, then a list of color stops. Each stop is a color and, optionally, a position. The browser interpolates between stops. If a later stop is positioned before an earlier one, CSS moves the earlier stop forward so positions never run backwards, which turns the blend into a hard edge. Set the positions you mean instead of relying on that fixup.

A first stop at 0% and a last stop at 100% use the whole element. A first stop at 20% paints a solid band from the start edge until that stop, then blends. That band is useful for a header bar and accidental when you wanted a full fade. Two stops that share a position, such as a color at 50% followed by a different color at 50%, create a stripe with no blend.

Angle and stops are independent. Changing 90deg to 180deg rotates the same stop list. It does not change which color is which. Build the palette in the palette generator first if the stops should stay in one family, then paste them here.

Older browsers that do not understand a color interpolation method still need a plain linear-gradient line before any line that uses in oklch or in oklab. The first declaration is the fallback. The second is the one newer browsers keep.

Compare this with the other shapes in the CSS gradient generator, including linear, radial, and conic. The CSS gradients guide covers syntax, and choosing color stops covers positions, hints, and hard edges. Pull seed colors from the palette generator or from a photo with palette from image.

FAQ

Frequently asked questions

Questions about linear CSS gradients and this generator.

What angle should a linear gradient use?: 0deg points up, 90deg points to the right, and 180deg points down. 135deg is a common diagonal. Pick the angle that matches where the light or the headline sits, then set stop positions instead of leaving them to the browser.
How do I keep text readable on a linear gradient?: A gradient is many backgrounds. Check the lightest and darkest points under the text in the contrast checker. WCAG 2.2 Success Criterion 1.4.3 needs 4.5:1 for normal text and 3:1 for large text where it applies. If a region fails, move the type onto a solid card.
Why does the middle of a two-stop linear gradient look gray?: sRGB interpolation between distant saturated hues often passes through a dull color. Add a middle stop, or interpolate in a different space. The CSS gradients guide and gradient stop guide walk through both.
Can I print a linear CSS gradient?: A continuous blend is a screen paint. For press, extract the stops that matter and check those flat colors in the print gamut checker or the HEX to CMYK converter. The CMYK values are a reference, not a press proof.