Color
CSS Gradient Background Generator
Pick two colors and a direction, then copy the ready-to-use CSS linear-gradient.
Background Gradient Generator
div {
background: linear-gradient(to bottom, #33ccff 0%, #0066ff 100%);
}About the gradient background generator
This tool generates a CSS linear-gradient() background from two hex colors, a direction, and two color-stop percentages. Pick a first and second color, choose one of eight direction presets — four sides and four corners — and set where each color's stop sits along that line; the preview swatch and the generated declaration update immediately. The result is a single background: linear-gradient(...) line you copy straight into a stylesheet, inline style, or CSS-in-JS template — no build step or extra markup required.
Everything runs client-side in your browser. The component holds color, direction, and stop-percentage state in React and recomputes the CSS string with useMemo on every change, so nothing is sent to a server. Both color fields accept 3- or 6-digit hex (#0066ff or #06f) and prepend # automatically if you omit it; a value is only flagged invalid after you leave the field, not on every keystroke. The two stop percentages are clamped to 0–100 and rounded to whole numbers, so typing -10 or 150 snaps back to a usable value instead of producing broken CSS.
Reach for this when you need a two-color gradient — a hero section, button, or card background — without hand-writing linear-gradient() syntax or guessing where a hard edge comes from. Direction keywords like to top right are easy to get backwards, and stop percentages set too close together collapse the blend into a visible line; adjusting both while watching a live preview is faster than editing CSS and refreshing the page. Copy the output into a stylesheet, or adapt it into a Tailwind arbitrary-value class.
Examples
div {
background: linear-gradient(to bottom, #33ccff 0%, #0066ff 100%);
}This is exactly what the tool renders in its live CSS preview pane for the default first color (#33ccff), second color (#0066ff), direction (to bottom), and stops (0%/100%).
background: linear-gradient(to top right, #ff6b6b 20%, #4ecdc4 90%);Generated by setting the first color to #ff6b6b at 20%, the second to #4ecdc4 at 90%, and direction to top right. Narrowing the stop range like this — instead of the default 0%/100% — pushes solid color further toward each end before the blend begins.
<div class="h-56 w-full bg-[linear-gradient(to_bottom,_#33ccff_0%,_#0066ff_100%)]"></div>Tailwind's arbitrary-value syntax replaces spaces with underscores inside the brackets; commas don't need escaping.
Frequently asked questions
How do I create a two-color gradient background in CSS?
Use the linear-gradient() function as a background or background-image value: background: linear-gradient(to bottom, #33ccff 0%, #0066ff 100%);. The first argument sets a direction, followed by comma-separated color stop% pairs — this generator produces exactly that syntax from the two colors, direction, and stops you choose above.
What's the difference between to bottom and 180deg in linear-gradient()?
A side keyword like to bottom always points straight at that edge, equivalent to 180deg. A corner keyword like to top right instead points at the box's actual corner, so its angle depends on the element's width and height and usually isn't exactly 45 degrees — it only is when the box is a perfect square. This generator only exposes the 8 keyword directions, not arbitrary angle values.
Can a CSS linear-gradient have more than two colors?
Yes — linear-gradient() accepts any number of comma-separated color stop% pairs, for example linear-gradient(to right, red 0%, yellow 50%, blue 100%). This generator only outputs a two-color gradient; add a third color stop% pair by hand in the generated CSS if you need more stops.
Why does my gradient show a hard edge instead of a smooth blend?
A hard edge appears when the two color stops sit at the same percentage or very close together, squeezing the transition into a thin band instead of a gradual blend. Spread the stops further apart — the default 0% and 100% blend smoothly across the entire length of the gradient.
Do I need vendor prefixes for linear-gradient() to work in all browsers?
No. linear-gradient() has been supported unprefixed in all evergreen browsers (Chrome, Firefox, Safari, Edge) for years, so the plain syntax this tool outputs needs no -webkit- or -moz- prefix.