CSS Gradients Explained: Linear, Directions and Copy-Paste Examples

Gradients turn flat designs into modern ones — hero backgrounds, buttons, cards. And in CSS they need zero images. Here's how linear-gradient() actually works and how to get clean code fast.

The basic syntax

background: linear-gradient(135deg, #6d48f5, #ec4899); — a direction, then two or more colors. The browser blends smoothly between them. Skip the trial-and-error and build yours visually with the CSS gradient generator, which gives you a live preview and copy-paste code.

Directions decoded

You can use keywords — to right, to bottom, to top right — or an angle like 135deg (0deg points up, 90deg points right). Diagonal angles (135deg) tend to look the most dynamic, which is why they're everywhere in modern UI.

Picking colors that blend well

The smoothest gradients use colors that are near each other on the color wheel (analogous), or two shades of the same hue. Wildly different colors can create a muddy band in the middle. Generate a harmonious pair first with the palette generator, then drop them into the gradient.

Where gradients shine

Hero sections, primary buttons, card headers, and text (with background-clip: text). A subtle gradient adds depth; a loud one adds energy — match it to your brand. Keep body-text backgrounds light enough that text stays readable; verify with the contrast checker.

Performance note

CSS gradients are rendered by the browser, so they're resolution-independent and weigh nothing compared to an image — no extra HTTP request, crisp on every screen. There's almost never a reason to use a gradient image instead.