How to Create Beautiful CSS Gradients

Gradients add depth and personality to a design. With CSS you can create them with no images at all.

The basics

A linear gradient blends colors along a line: background: linear-gradient(120deg, #7c5cff, #f5c86b);. The angle controls the direction, and you can add as many color stops as you like.

Tips for good gradients

• Use colors that are close on the color wheel for smooth blends.
• Two or three stops usually look cleaner than many.
• Subtle gradients read as more premium than harsh ones.

Build one visually

Our free CSS Gradient Generator lets you pick colors and an angle, preview live and copy the CSS. Need a full color scale? The Color Shades Generator creates tints and shades from any base color.