Pick an angle and colour stops and copy a linear-gradient() background for any element
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.A linear gradient blends colours along a straight line. Set the angle, where 0deg points up and 90deg to the right, or pick a side such as to right, then place each colour stop along the line. The preview updates as you drag, and the copied CSS includes a plain background colour first, for the rare browser that cannot draw the gradient.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
Gradients are written as a function with a direction and a list of colour stops. The syntax is short but easy to get wrong, and an existing gradient is hard to adjust by eye. Build one with controls while the preview updates, or paste one from your stylesheet to change it.
Stops. Each stop has a colour, an opacity and a position along the line from 0 to 100 per cent. Two stops at the same position make a hard edge instead of a blend. The output lists the stops in order of position and leaves out what CSS assumes, such as 180deg for a linear gradient or a centred position.
Reading a pasted gradient. Paste a background or background-image value, or just the function. Angles in deg, turn, rad and grad, side keywords, at positions, hex, rgb() and rgba() colours and the basic colour names are read. Where CSS fills something in, the page does the same and says so: stops without a position are spread evenly, a stop placed before an earlier one moves up to it, and transition hints are dropped.
The rest of the article, and all 6 questions about CSS Gradient Generator, are on the CSS Gradient Generator page.
The angle points the gradient line: 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom, which is the default, and 270deg from right to left. Positive angles turn clockwise. The keywords to top, to right, to bottom and to left mean exactly 0, 90, 180 and 270 degrees.
Put two stops at the same position: red 50%, blue 50% switches from red to blue in one line instead of blending. Repeat the trick with repeating-linear-gradient and four stops, such as two colours at 0 to 5 per cent and 5 to 10 per cent, to draw stripes.
Paste the background or background-image value into the box under the controls and press Read. The kind, angle or position and every stop are loaded into the controls, the preview shows it, and any part CSS filled in by itself, such as missing stop positions, is listed so nothing changes without notice.
Yes. Lower the opacity of a stop and the gradient fades into whatever is behind the element. A stop from black at 0 opacity to black at 60 per cent is the usual overlay that keeps white text readable on a photo. The colour is written as rgb() with an alpha value.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Gradient Generator and anybody who knows can answer. No account needed.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.