The CSS Gradient Generator builds ready-to-paste CSS gradient code from your colour choices and direction: pick two colours as six-digit hex values, set the angle, and it outputs a linear-gradient declaration you can drop straight into a stylesheet, previewing the blend as you work.
How It Works
The generator validates both colours as hex values and composes the standard CSS function with your angle:
background: linear-gradient(90deg, #ff7e5f, #feb47b);
Angles follow the CSS convention: 0deg points upward (equivalent to to top), 90deg points right, 180deg downward, and 270deg left, with keyword directions (to bottom right and friends) interchangeable with their degree equivalents. With two colours and no explicit stop positions, the first colour starts at 0% and the second ends at 100%, and the browser interpolates the middle.
Parameters
| Input | Meaning | |---|---| | Colour 1 / Colour 2 | Six-digit hex values for the gradient ends | | Angle | Direction of the gradient line, in degrees |
Worked example
The sunset blend above, linear-gradient(90deg, #ff7e5f, #feb47b), runs a warm coral into a soft peach horizontally. Rotate it to 180deg and the same colours become a top-to-bottom wash suitable for a hero section behind a headline; set 45deg for the diagonal energy common in fintech and SaaS branding. Colour stops refine the blend: linear-gradient(90deg, #ff7e5f 0%, #feb47b 70%) holds the coral longer and completes the transition at 70%, leaving the last 30% solid peach, while placing two stops at the same position (#feb47b 50%, #3a7bd5 50%) creates a hard edge with no blend at all, the trick behind CSS-only stripes, flags, and split backgrounds.
The wider gradient family
Linear gradients are one of three CSS gradient types worth knowing. Radial gradients radiate from a centre point (radial-gradient(circle at center, #ff7e5f, #feb47b)) and suit glows, spotlights, and vignettes; their shape (circle or ellipse), size, and position are all settable. Conic gradients sweep colours around a centre by angle (conic-gradient(from 0deg at 50% 50%, ...)) and, with hard stops, draw pie charts and colour wheels in pure CSS. Repeating variants (repeating-linear-gradient) tile a stop pattern indefinitely, the classic route to hazard stripes and graph-paper backgrounds. All four are generated by the browser at paint time: no image file, no network request, resolution-independent at every screen density, which is why gradients displaced sliced background images for this class of decoration a decade ago.
Using gradients without hurting the design
Three disciplines separate professional gradient work from decoration noise. Contrast: text over a gradient must stay readable over the worst part of the blend, so check your text colour against both end colours (the Image Color Picker on this site reports WCAG contrast ratios for exactly this), and prefer an overlay scrim when in doubt. Subtlety: for surfaces and backgrounds, blends between neighbouring hues or two shades of one hue age far better than full-spectrum sweeps; the shade scale in the Color Converter exists to build those disciplined pairs. Animation: gradients themselves do not transition, so animate background-position on an oversized gradient (background-size: 200% 200%) with keyframes for the familiar slow-pan effect, and respect prefers-reduced-motion for users who opt out of movement. Performance is rarely a concern, though stacking many large blurred and gradient layers can tax low-end GPUs during scrolling; keep hero gradients simple and let content carry the page.
Frequently Asked Questions
Do CSS gradients need vendor prefixes?
No. The standard syntax is supported across all modern browsers; the -webkit- prefixed forms belong to pre-2013 tutorials and can be dropped safely.
Can I use more than two colours?
Yes: add comma-separated colour stops between the ends, each optionally followed by a position. The generator builds the two-colour foundation; multi-stop blends follow the same syntax, and the stop-position rules in the worked example govern them.
Why does my gradient look banded?
Banding appears in long, subtle blends, especially dark ones, because 8-bit channels step visibly. Mitigations are pragmatic: shorten the blend distance, add a touch of noise (an SVG or PNG overlay at low opacity), or accept it as a rendering limit that print does not share. It is rarely visible on short, high-contrast transitions.