CSS Linear Gradient Generator
Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the gradient generator with the linear type already selected. Drag the angle slider to rotate the fade, adjust the color stops, and the full-width preview plus the CSS line update on every input.
linear-gradient() paints colors along a straight line — the most used gradient in CSS by far. 90deg runs left to right, 180deg top to bottom, and any angle in between gives a diagonal; the stop positions in percent decide where each color band starts blending into the next.
When the preview looks right, copy the background line into your stylesheet. If you want a starting point instead of a blank slate, the sunset, ocean and pastel preset pages open this same tool with proven color pairs already loaded.
Example. A linear gradient at 90 degrees from #2563eb at 0% to a second stop copies linear-gradient(90deg, #2563eb 0%, ...).
Limit. There are at most six color stops, and the angle slider runs from 0 to 360 degrees.