CSS Gradient Generator
Blend two colours into a CSS linear gradient and copy the code.
background: linear-gradient(90deg, #6366f1, #a855f7);
This generator builds a two-colour CSS linear gradient and shows it live as you adjust it. Pick a start and end colour, drag the angle slider, and the preview box and the code line update together on every change. When it looks right, press Copy CSS to grab a ready-to-paste background declaration. Everything runs in your browser — there is nothing to upload and no image file is produced, just the CSS text you drop straight into a stylesheet.
Two colour stops and one angle
The two swatches set the start and end of the gradient — they default to indigo #6366f1 and violet #a855f7. The blend always runs straight from the first colour to the second with no mid-point stops, so you get a clean two-colour fade rather than a multi-stop ramp. The Rotation Angle slider covers 0–360°, following the CSS convention where 0deg points the gradient upward, 90deg (the default) runs left-to-right, and 180deg runs top-to-bottom. The badge beside the slider shows the current angle, and that number is written directly into the generated linear-gradient().
Presets and the copied code
Three presets give you a starting point in one click: Ocean (blue #3b82f6 to green #10b981), Sunset (rose #f43f5e to orange #fb923c) and Candy (violet #8b5cf6 to pink #ec4899). A preset simply loads its two colours into the swatches, so you can still nudge the angle or fine-tune either colour afterwards. The output reads like background: linear-gradient(90deg, #6366f1, #a855f7); — a single declaration ending in a semicolon. Because it is a standard background value, the same string also works inline in a style attribute.
What the preview does and does not show
The preview pane applies the exact CSS you are about to copy, so the colours and direction you see are faithful. What it cannot predict is the shape of the element you paste into: an angled gradient looks different across a wide banner than down a tall narrow sidebar, because the angle is measured against that element's own box. If you plan to lay text over the result, check contrast against both ends of the blend — a gradient that reads well over its light end can swallow the same text over its dark end.
Frequently Asked Questions
Can I add a third colour or extra stops?
Not from the controls — this builds a two-stop blend from the start colour to the end colour. To add mid-stops you can edit the copied linear-gradient() by hand, inserting extra colours between the two.
What does the angle number actually mean?
It is the CSS gradient angle: 0deg sends the blend toward the top, 90deg (the default) toward the right, and 180deg toward the bottom. The slider runs the full 0–360°.
Does it make radial or conic gradients too?
No. This tool outputs a linear-gradient() only. Radial and conic gradients use different CSS syntax and are not generated here.
Where do I paste the copied code?
Into the background property of any CSS rule, or inline in a style attribute. It is a complete declaration ending in a semicolon, so no extra editing is needed to use it.