Advertisement
CSS Gradient Types Explained
CSS gradients create smooth color transitions without image files, keeping pages fast and scalable at any resolution. Modern CSS supports three gradient types: linear, radial, and conic.
Gradient Syntax Reference
- Linear:
background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - Radial:
background: radial-gradient(circle at center, #ff6b6b, #4ecdc4); - Conic:
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4); - Multiple stops:
linear-gradient(to right, red 0%, yellow 50%, green 100%) - Hard stops:
linear-gradient(to right, red 50%, blue 50%)
Common Gradient Uses
- Button backgrounds and hover states
- Hero section background fills
- Text gradients:
background-clip: text; -webkit-text-fill-color: transparent; - Card borders and progress bar fills
How do I make a gradient text effect in CSS?
Apply the gradient as a background on the text element, then clip it to the text: background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;. This works in all modern browsers. The element needs display:inline or inline-block for the clip to work correctly.
Are CSS gradients better than gradient images?
Yes, in almost all cases. CSS gradients have zero file size, scale perfectly at any resolution, can be animated with CSS transitions, and are easily modified in code. Image gradients have fixed file size, pixelate if stretched, and require a separate HTTP request. The only case for image gradients is extremely complex photographic-style gradients.