What is CSS Gradient?
CSS gradients are CSS3 image types that display smooth transitions between two or more specified colors. These transitions are displayed in a specific direction or angle, or as a radial pattern. Gradients allow you to create beautiful, colorful backgrounds without using images.
There are three types of CSS gradients:
Linear Gradient - Colors transition along a straight lineRadial Gradient - Colors transition from a center point outwardConic Gradient - Colors transition around a center point
📝 Syntax
Linear Gradient Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Parameter Breakdown:
direction - The direction of the gradient line (angle or to side)
color-stop - Color and its position (can be color name, hex, rgb, or hsl)
Radial Gradient Syntax
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Quick Reference:
📋 Common Direction Values
to top - Bottom to topto bottom - Top to bottom (default)to left - Right to leftto right - Left to rightto top right - Diagonal to top-right45deg - 45 degree angle
_LINEAR GRADIENT EXAMPLES
1. Basic Two-Color Gradient
Transition from one color to another from top to bottom.
background : linear-gradient(to bottom, #133ae7, #5ee206) ;
2. Left to Right Gradient
Colors transition from left to right.
background : linear-gradient(to right, red, orange) ;
3. Diagonal Gradient
Colors transition diagonally from corner to corner.
background : linear-gradient(to bottom right, red, black) ;
4. Angle-Based Gradient
Control the exact angle of the gradient direction.
background : linear-gradient(175deg, white 0%, black 100%) ;
🌈 MULTIPLE COLOR STOPS
Add more than two colors to create complex gradients with multiple color stops.
Three Colors
background : linear-gradient(to right, #ff6b6b, #feca57, #48dbfb) ;
Four Colors
background : linear-gradient(to right, #667eea, #764ba2, #f64f59, #12d8fa) ;
Color Stop Positions
You can specify exact positions for each color stop using percentages or pixels.
background : linear-gradient(to right,
red 0%,
orange 25%,
yellow 50%,
green 75%,
blue 100%
) ;
📐 ANGLE DEMONSTRATION
Different angles produce different gradient directions. Try these common angle values:
⭕ RADIAL GRADIENT EXAMPLES
Radial gradients start from a central point and radiate outward.
Center Radial
background : radial-gradient(circle, white, black) ;
Ellipse Radial
background : radial-gradient(ellipse, white, blue) ;
Offset Radial
background : radial-gradient(circle at 30% 30%, yellow, green) ;
🌀 CONIC GRADIENT EXAMPLES
Conic gradients create color transitions that rotate around a center point, similar to a color wheel or pie chart.
Conic Gradient Syntax
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);
1. Basic Conic Gradient
Colors rotate around the center in circular motion.
background :
conic-gradient(red, yellow, lime, cyan, blue, magenta, red) ;
2. Starting Angle Control
You can rotate where the gradient begins using from angle.
background :
conic-gradient(from 90deg, orange, purple, teal, orange) ;
3. Positioned Conic Gradient
Move the gradient center using position values.
background :
conic-gradient(at 30% 40%, red, yellow, green, blue, red) ;
4. Pie Chart Style (Color Stops)
Perfect for charts and progress indicators.
background :
conic-gradient(
#667eea 0% 25%,
#764ba2 25% 50%,
#f64f59 50% 75%,
#12d8fa 75% 100%
) ;
5. Repeating Conic Gradient
Create radial patterns using repeating conic gradients.
background :
repeating-conic-gradient(red 0deg 15deg, black 15deg 30deg) ;
💧 TRANSPARENCY & REPEATING GRADIENTS
Transparent Gradient
Create fading effects using rgba with alpha channel or transparent keyword.
background : linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) ;
Repeating Linear Gradient
Create patterns by repeating the gradient.
background : repeating-linear-gradient(45deg, #667eea, #667eea 10px, #764ba2 10px, #764ba2 20px) ;
🚀 ADVANCED EXAMPLES
Gradient Text
Apply gradient to text using background-clip: text.
Gradient Text
background : linear-gradient(to right, #667eea, #764ba2, #f64f59) ;
-webkit-background-clip : text ;
-webkit-text-fill-color : transparent ;
Gradient Border
Create colorful gradient borders.
Button with Gradient
Gradient Button
🚀GRADIENT GENERATOR
Create unlimited-color gradients and generate animated CSS automatically.
💡 TIPS & BEST PRACTICES
Pro Tips for Using CSS Gradients:
Color Harmony: Use colors that complement each other. Tools like color.adobe.com can help.Performance: CSS gradients render faster than images. Use them for backgrounds when possible.Browser Support: All modern browsers support CSS gradients. No prefixes needed for current versions.Accessibility: Ensure sufficient contrast for text placed on gradient backgrounds.Mobile-First: Test gradients on different screen sizes and devices.Gradients vs Images: Use gradients instead of images for simple color transitions to reduce page load time.
📊 QUICK SUMMARY
background : linear-gradient(to right, red, blue) ;
background : linear-gradient(45deg, red, blue) ;
background : radial-gradient(circle, red, blue) ;
background : linear-gradient(to right, red 0%, orange 50%, blue 100%) ;
background : repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px) ;
🎉 Congratulations! You now know how to create beautiful CSS gradients!