How to Use CSS Gradients

CSS linear-gradient and radial-gradient let you transition smoothly between colors in backgrounds. They look great on hero sections, buttons, and card backgrounds. But hand-tuning angle values and hex codes is tedious — this tool lets you drag, preview, and copy the result.

Linear vs. Radial — What's the Difference?

linear-gradient flows in a straight line from one side to another. You set the angle — 0deg goes bottom to top, 90deg goes left to right, 180deg goes top to bottom. It covers most use cases: hero banners, buttons, card backgrounds. radial-gradient radiates outward from a center point in a circle or ellipse — perfect for spotlight effects, hover glows, or more artistic backgrounds. Both support multiple color stops for richer, more complex transitions.

Picking Colors That Work Together

The safest bet is shades of the same hue — dark blue to light blue, deep purple to soft lavender. For something livelier, try adjacent colors: orange to pink, blue to teal. Avoid complementary colors in a direct gradient (like red to green) — the transition zone turns muddy gray. If you're stuck for inspiration, look at current design trends: glassmorphism uses semi-transparent white fading to clear, and aurora-style gradients blend soft blues, greens, and purples.

Why Gradients Beat Background Images

CSS gradients don't require loading an image file, so your page loads faster and uses less bandwidth. They're vector-based — sharp on any screen size or resolution, no pixelation. Responsive design is effortless because there's nothing to resize. The only caveat: really complex gradients (dozens of color stops plus animations) can lag on low-end phones, but a typical 2-3 stop gradient runs without a hiccup.