CSS Gradient Generator

Gradients are back — subtle two-tone backgrounds on hero sections, buttons and cards are one of the defining looks of modern interfaces, and CSS renders them natively with no image files. This generator writes the code for you: choose your two colours, pick linear or radial, set the angle, and copy a clean background declaration ready to paste into any stylesheet.

The linear angle follows CSS convention: 0° points the gradient upward (start colour at the bottom), 90° points right, and the popular 135° runs diagonally from top-left to bottom-right — the default here because it flatters most layouts. Radial gradients bloom from the centre outward, suited to spotlight effects and circular elements. The output also includes a solid-colour fallback line, so ancient browsers that predate gradient support show your start colour rather than nothing.

Two colours make a gradient; taste makes it a good one. Neighbouring hues (indigo to violet, teal to blue) blend smoothly, while opposites can meet in a muddy grey midpoint — if you want a bold two-colour statement, pick colours that share some undertone. Keeping both stops at similar lightness avoids the washed-out band in the middle. For text overlays, check contrast against both ends of the gradient, not just one. If you need a hand relating colours, the colour converter next door shows every colour's hue/saturation/lightness so you can pick companions deliberately.