How to Create CSS Gradients
CSS gradients let you create smooth transitions between colors without images, reducing page weight and improving performance. This guide covers linear gradient syntax, angle control, and multi-stop gradients.
Basic Linear Gradient Syntax
The CSS linear-gradient() function creates a gradient image. Basic syntax: background: linear-gradient(direction, color1, color2). Direction can be an angle (135deg) or keywords (to right, to bottom left).
Adding Multiple Color Stops
You can add as many color stops as needed: linear-gradient(90deg, #ff0000, #00ff00, #0000ff). You can also control stop positions: linear-gradient(90deg, red 0%, yellow 50%, blue 100%).
Angle Control
0deg points upward, 90deg points right, 180deg points down. Use our Gradient Generator to visually adjust the angle and see the result in real time.
Gradient Best Practices
Use gradients sparingly—one strong gradient is better than many subtle ones. Ensure text over gradients meets contrast requirements. Use background-size with gradients for repeating patterns.
Use These Tools
Related Guides
Color Formats Explained: HEX, RGB, HSL, HSV
A complete guide to understanding digital color formats and when to use each one.
How to Create a Color Palette for Your Brand: A Comprehensive Guide 2026
A comprehensive 2026 guide to building a strategic brand color palette using color psychology, color theory, and the 60-30-10 rule.