CSS Gradients: A Complete Guide to Beautiful Backgrounds

CSS gradients create smooth color transitions without images - they're resolution-independent, fast to load, and endlessly customizable. Here's everything you need to know.

Linear Gradients

background: linear-gradient(135deg, #667eea, #764ba2);

The angle controls direction: 0deg goes up, 90deg goes right, 180deg goes down. Use to right, to bottom left, etc. for readable alternatives.

Radial Gradients

background: radial-gradient(circle, #667eea, #764ba2);

Radial gradients spread from a center point outward. Use circle or ellipse shapes, and position with at center, at top left, etc.

Color Stops

Control where colors transition: linear-gradient(90deg, red 0%, yellow 50%, green 100%). You can add as many stops as you want for complex gradients.

Build Gradients with Toolium

The CSS Gradient Generator lets you build gradients visually. See a live preview as you adjust colors, angles, and stops. Copy the generated CSS with one click. Start from preset gradients and customize from there.