CSS workflow
CSS gradient stops, hard edges and text contrast
A gradient is an image painted by CSS. A few precise stops can make a useful surface, but the preview alone cannot tell whether text stays readable across it.
Content updated: · Maintainer and corrections
Set direction and stop positions
In a linear gradient, 0deg points up and 90deg points right. A radial gradient begins at its center and extends outwards; circle and ellipse differ in shape. This editor anchors the radial center and does not expose arbitrary positions.
Each stop has an opaque six-digit sRGB HEX color and an integer position from 0% to 100%. The editor sorts stops by position when generating CSS. Two stops at the same position can create a hard edge; equal-position stops keep their entry order. This 2–5-stop limit belongs to the editor, not the CSS specification.
Use the preview as a preview
The preview uses the browser's native gradient renderer. Its appearance can depend on the element's actual dimensions, color rendering and surrounding styles. Copy the rule into the receiving component and inspect it at real sizes.
The generated rule includes a solid background-color fallback. It does not create a repeating or conic gradient, transparent layers, wide-gamut color interpolation, a downloadable image or a saved project.
Check contrast where it is weakest
Text over a gradient can meet a contrast threshold in one area and fail in another. A solid-color contrast checker tests one color pair, not the entire gradient or its overlaid text. Inspect every relevant text location and state against the rendered background, especially where the colors are closest to the text color.
If sufficient contrast cannot be maintained, change the palette or give the text a solid backing. Do not infer a WCAG pass from the gradient preview or a single sampled pair.
.banner {
background-color: #315460;
background-image: linear-gradient(90deg, #315460 0%, #C48969 50%, #E8BC8F 100%);
}Data provenance