CSS Gradients
CSS gradients allow you to display smooth transitions between two or more specified colors. They are treated as images by the browser (background-image). There are two main types: Linear and Radial.
1. Linear Gradient (linear-gradient)
A linear gradient creates a band of colors that progress in a straight line.
Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction
You can specify the direction of the gradient line.
- Keywords:
to bottom(default),to top,to right,to left,to bottom right, etc. - Angles:
0deg(to top),90deg(to right),180deg(to bottom), etc.
/* Top to Bottom (Default) */
.linear-default {
background-image: linear-gradient(red, yellow);
}
/* Left to Right */
.linear-right {
background-image: linear-gradient(to right, red, yellow);
}
/* Diagonal */
.linear-diagonal {
background-image: linear-gradient(to bottom right, red, yellow);
}2. Radial Gradient (radial-gradient)
A radial gradient creates a transition that radiates from a central point (origin) outward.
Syntax: background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Shape
ellipse(Default): Adapts to the aspect ratio of the container.circle: Forces a perfect circle regardless of container shape.
Size
Defines where the gradient ends.
farthest-corner(Default)closest-sideclosest-cornerfarthest-side
/* Default Radial (Ellipse, Center) */
.radial-default {
background-image: radial-gradient(red, yellow, green);
}
/* Circle */
.radial-circle {
background-image: radial-gradient(circle, red, yellow, green);
}3. Key Differences
- Geometry: Linear follows a straight line; Radial follows a circular/elliptical pattern from a center point.
- Parameters: Linear uses direction (angle/side); Radial uses shape, size, and position.
- Use Cases: Linear is great for headers, buttons, and shadows. Radial is great for spotlights, suns, or circular vignettes.