CSS Gradients: A Complete Guide
Master CSS linear and radial gradients with practical examples.
CSS gradients create smooth color transitions without images. They are resolution-independent, load instantly, and can create sophisticated visual effects.
Linear Gradients
Linear gradients transition colors along a straight line. The basic syntax is background: linear-gradient(direction, color1, color2). The direction can be specified as an angle (135deg) or keywords (to right, to bottom).
You can add multiple color stops: linear-gradient(to right, red, orange, yellow, green). Each color transitions smoothly to the next.
Radial Gradients
Radial gradients transition colors outward from a center point. The basic syntax is background: radial-gradient(shape, color1, color2). The shape can be circle or ellipse.
Color Stop Positions
You can control where each color starts and ends: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%). This creates a hard edge between colors instead of a smooth transition.
Practical Uses
Gradients are perfect for hero sections, buttons, overlays on images, decorative borders, loading indicators, and background patterns. Our Gradient Generator creates the CSS code for any gradient you design.
Performance
CSS gradients render faster than images because they are generated by the browser. They also scale perfectly at any resolution, making them ideal for responsive design. Use gradients instead of gradient images whenever possible.
🎨 Try our color tools!