CSS Gradient Types Explained: Linear, Radial, and Conic
CSS gradients are powerful tools that allow you to create smooth transitions between colors without using images. Understanding the different types of gradients and their syntax is essential for modern web design.
Linear Gradients
Linear gradients transition colors along a straight line. They're the most commonly used gradient type.
Basic Syntax
The basic syntax for a linear gradient is:
background: linear-gradient(direction, color1, color2, ...);
Direction Options
You can specify the direction using angles or keywords:
Examples
A simple two-color gradient from left to right:
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
A diagonal gradient with multiple colors:
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
Radial Gradients
Radial gradients emanate from a central point outward in a circular or elliptical pattern.
Basic Syntax
background: radial-gradient(shape size at position, color1, color2, ...);
Shape Options
Size Keywords
Examples
A circular gradient centered:
background: radial-gradient(circle, #fff, #000);
An elliptical gradient positioned in the top-left:
background: radial-gradient(ellipse at top left, #ff9a9e, #fecfef);
Conic Gradients
Conic gradients rotate colors around a center point, like a color wheel.
Basic Syntax
background: conic-gradient(from angle at position, color1, color2, ...);
Use Cases
Examples
A simple conic gradient:
background: conic-gradient(#ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
A pie chart effect:
background: conic-gradient(#ff6b6b 0deg 120deg, #4ecdc4 120deg 240deg, #45b7d1 240deg);
Color Stops
All gradient types support color stops, which let you control where each color appears.
Percentage-Based Stops
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);
Hard Stops (No Transition)
Create sharp color boundaries by using the same position for adjacent colors:
background: linear-gradient(90deg, red 50%, blue 50%);
Browser Support
CSS gradients are well-supported in all modern browsers. However, for older browsers, always provide a fallback solid color:
background: #667eea;
background: linear-gradient(90deg, #667eea, #764ba2);
Conclusion
Understanding the three types of CSS gradients opens up endless creative possibilities. Use GradientSpark to experiment with different combinations and find the perfect gradient for your project.