Gradients in CSS
? Gradients in CSS
Gradients let you create smooth transitions between two or more colors — great for backgrounds, buttons, and visual effects without using images.
Types of CSS Gradients
| Gradient Type | Description | Syntax Example |
|---|---|---|
| Linear Gradient | Colors transition along a straight line | linear-gradient(direction, color1, color2, ...) |
| Radial Gradient | Colors radiate outward from a center | radial-gradient(shape size at position, color1, color2, ...) |
| Conic Gradient | Colors rotate around a center point | conic-gradient(from angle at position, color1, color2, ...) |
1. Linear Gradient
Creates a gradient along a line (default top to bottom).
background: linear-gradient(to right, #ff7e5f, #feb47b);to right: gradient goes left ? rightCan use angles like
45deg,180deg, etc.
Example:
.header { background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);}2. Radial Gradient
Creates a gradient that radiates from the center (or specified position).
background: radial-gradient(circle, #ff7e5f, #feb47b);You can specify shape (circle or ellipse) and size (closest-side, farthest-corner, etc.).
Example:
.circle { background: radial-gradient(circle at center, #00c6ff, #0072ff);}3. Conic Gradient
Colors sweep around a center point like a pie chart.
background: conic-gradient(from 0deg at center, #ff7e5f, #feb47b, #ff7e5f);Example:
.conic { width: 150px; height: 150px; background: conic-gradient(from 90deg at center, red, yellow, green, blue); border-radius: 50%;}Additional Options
You can add multiple color stops, e.g.,
background: linear-gradient(to bottom, red 0%, orange 50%, yellow 100%);Combine with transparency:
background: linear-gradient(to right, rgba(255,0,0,0.8), transparent);Browser Support
Gradients are widely supported in all modern browsers.
Want me to generate some custom gradient CSS for your project? Or show how to animate gradients?
