CSS Gradient Generator
Build linear or centered radial gradients with two to five color stops, preview native CSS, and copy a safe rule locally.
02 / Type and direction
Choose the gradient
CSS angles: 0° points up, 90° right. Use the slider or number field.
03 / Color stops
Place the colors
Drag a slider or enter 0–100%. Output is sorted by position; equal positions make a hard edge.
Two to five opaque sRGB stops. Alpha and CSS color functions are outside this editor.
04 / Browser preview
See the actual gradient
The browser paints this native CSS gradient. Text contrast varies across it; this preview makes no WCAG pass claim.
05 / Output
Copy into your project
.gradient {
background-color: #315460;
background-image: linear-gradient(90deg,
#315460 0%,
#C48969 50%,
#E8BC8F 100%
);
}Settings stay on this page: no upload, storage or URL parameters. Check solid-color contrast →
How to use this tool
Choose linear or radial, adjust the angle or shape, then drag each stop or enter exact HEX and position values. Compare the browser preview with the generated CSS before copying.
When not to use it
This editor only supports opaque six-digit sRGB stops. A gradient preview cannot certify text contrast; inspect the least contrasting part in the actual layout.
Read the guide →