10 CSS Gradient Ideas You Can Copy and Customize

A good gradient can make a flat design feel more dynamic without adding any extra markup — just a single background-image declaration handles what would otherwise take an image asset or extra DOM elements.

A few reliable combinations

1. Indigo to cyan (135deg) — a clean, modern combination that works well for primary buttons and hero backgrounds.
2. Sunset orange to pink (90deg) — warm and energetic, good for call-to-action sections and promotional banners.
3. Deep purple to blue (120deg) — reads as premium and technical, common in SaaS landing pages and dashboards.
4. Teal to lime (45deg) — fresh and high-contrast, works well for badges, tags, or small highlights rather than large surfaces.
5. Charcoal to slate (180deg) — a subtle dark-mode background gradient that doesn't compete with content sitting on top of it.
6. Rose to amber (100deg) — soft and approachable, a good fit for lifestyle or consumer-facing brands rather than technical products.

Getting the angle right

The angle in linear-gradient() controls the direction the colors flow — 0deg goes bottom to top, 90deg goes left to right, and 180deg goes top to bottom. Diagonal angles around 120–135deg tend to look the most dynamic for hero sections and cards, since a perfectly horizontal or vertical gradient can look flatter and more static by comparison.

Linear vs radial gradients

Everything above uses linear-gradient(), which flows in a straight line across an element. radial-gradient() instead flows outward from a center point, which works well for spotlight effects, a subtle glow behind a hero heading, or button hover states where you want the eye drawn to the center. Radial gradients are used less often than linear ones, but they're worth reaching for when a straight-line flow doesn't fit the shape of what you're highlighting.

A quick accessibility check

If text sits on top of a gradient, contrast can look fine at one end and fail at the other — a light gray heading might read clearly over the dark end of a gradient but disappear over the lighter end. Check contrast against both ends of the gradient, not just the middle, especially for body text rather than large decorative headings.

Using CSS variables for gradient stops

If the same two or three colors show up in several gradients across a site, defining them as CSS custom properties (--brand-start, --brand-end) and referencing them inside linear-gradient() keeps every gradient in sync when the palette changes later. It also makes a dark-mode variant simpler to maintain — override the variables inside a dark-mode media query or class, and every gradient built from them updates automatically without hunting down each individual declaration.

Build your own

Rather than guessing hex values and angles from scratch, use the Color Picker & Gradient Generator to pick two colors and an angle, preview the result live, and copy the ready-to-use CSS. For gradients with more than two color stops, or a radial shape, the CSS Gradient Generator builds multi-stop linear and radial gradients with the same live preview and copy-ready output.