3 Types of CSS Gradients: Linear, Radial, and Conic
Gradients are a great way to make your website look modern and visually appealing without needing background images. With CSS, you can create smooth transitions between colors using gradients, and there are three main types you should know about: linear, radial, and conic.
Linear Gradient
A linear gradient blends colors along a straight line — it can go from top to bottom, left to right, or even diagonally.
Basic Syntax:background: linear-gradient(direction, color1, color2, ...);
Example of Code:background: linear-gradient(to right, red, yellow);
Output:
This creates a smooth transition from red on the left to yellow on the right.
Where to Use It:- Buttons
- Headers and footers
- Backgrounds
- Hover effects
You can use directions like to right, to bottom, or angles like 45deg.
Radial Gradient
A radial gradient starts at a center point and radiates outward in a circular or elliptical shape. The colors spread out from the middle.
Basic Syntax:background: radial-gradient(shape at position, color1, color2, ...);
Example of code:background: radial-gradient(circle at center, blue, green);
Output:
This gives you a blue center that fades into green toward the edges.
Where to Use It:- Highlighting a center area
- Spotlight effects
- Backgrounds that feel more “organic” or natural
You can choose between circle or ellipse, and also control where the center starts.
Conic Gradient
A conic gradient works like a color wheel — the colors spin around a central point, rather than moving in a line or radiating outward.
Basic Syntax:background: conic-gradient(from angle at position, color1, color2, ...);
Example of Code:background: conic-gradient(from 45deg at center, #ff0000 0%, #00ff00 50%, #1100fa 100%);
TThis creates a circular pattern of colors that wraps around like a pie chart.
Where to Use It:- Pie charts and data visuals
- Color wheels
- Unique circular background effects