🌅 Linear Gradients
/* Basic linear gradient */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
/* Multiple colors */
background: linear-gradient(
to right,
#ff6b6b 0%,
#feca57 50%,
#48dbfb 100%
);
Linear gradients create smooth transitions between colors along a straight line. Perfect for backgrounds, buttons, and modern UI elements.
🔴 Radial Gradients
/* Basic radial gradient */
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
/* Positioned radial */
background: radial-gradient(
ellipse at center top,
#ff9a9e 0%,
#fecfef 100%
);
Radial gradients emanate from a center point. Great for creating spotlight effects, buttons, and artistic backgrounds.
🌀 Conic Gradients
/* Basic conic gradient */
background: conic-gradient(#ff6b6b, #4ecdc4);
/* Color wheel effect */
background: conic-gradient(
from 0deg,
red, orange, yellow, green, blue, purple, red
);
Conic gradients rotate around a center point. Perfect for creating pie charts, progress rings, and unique design elements.
🔁 Repeating Gradients
/* Repeating linear */
background: repeating-linear-gradient(
45deg,
#ff6b6b 0px,
#ff6b6b 10px,
#4ecdc4 10px,
#4ecdc4 20px
);
Repeating gradients create pattern effects. Useful for stripes, textures, and decorative backgrounds.
🎨 Advanced Techniques
/* Layered gradients */
background:
linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 70%),
radial-gradient(circle, #ff6b6b, #4ecdc4);
/* Gradient borders */
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
Combine multiple gradients for complex effects. Create gradient borders, overlays, and sophisticated designs.
📱 Responsive Gradients
/* Mobile-first gradient */
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
@media (min-width: 768px) {
background: linear-gradient(
135deg,
#ff6b6b 0%,
#feca57 50%,
#4ecdc4 100%
);
}
Adapt gradients for different screen sizes. Use media queries to optimize gradient appearance across devices.