CSS Gradients Explained
CSS gradients let you create smooth transitions between two or more colors, without using images. They're rendered by the browser (no HTTP requests), scale perfectly to any resolution, and can be animated with CSS transitions.
Types of CSS Gradients
- Linear gradient: Transitions along a straight line. Specify direction (angle or keywords) and color stops. Example:
background: linear-gradient(to right, #3B82F6, #8B5CF6) - Radial gradient: Transitions outward from a center point in a circular or elliptical shape. Example:
background: radial-gradient(circle, #3B82F6, #1E3A5F) - Conic gradient: Transitions around a center point (like a color wheel). Example:
background: conic-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00)
Gradient Color Stop Syntax
Each color stop has a color and an optional position: linear-gradient(to right, red 0%, blue 50%, green 100%). Colors can be in any CSS format: hex, rgb, rgba, hsl, or named colors. Using rgba or hsla lets you create gradients that include transparency.
Popular Gradient Techniques
- Smooth gradients: Use colors that are close on the color wheel. Complementary colors (opposite on the wheel) can create a muddy middle zone.
- Multi-stop gradients: Add intermediate color stops to guide the transition through specific colors.
- Hard stops: Set two colors at the same position to create a sharp line:
linear-gradient(red 50%, blue 50%) - Gradient text: Apply gradients to text using
background-clip: textand-webkit-text-fill-color: transparent - Layered gradients: Stack multiple gradients using
background-imagewith comma-separated values.