CSS Gradients
Paint the web with smooth colour transitions and creative patterns
Linear Gradients
Create smooth transitions between colours along a straight line. Control direction, colour stops, and create stunning effects.
Basic Linear Gradients
Two Colour
Multi Colour
Diagonal
/* Two colour gradient */
.gradient {
background: linear-gradient(
to right,
#3b82f6,
#8b5cf6
);
}
/* Multi colour */
.rainbow {
background: linear-gradient(
to right,
#ff0000,
#ff8800,
#ffff00,
#00ff00,
#0088ff,
#8800ff
);
}
/* Diagonal */
.diagonal {
background: linear-gradient(
45deg,
#f06,
#48f
);
}Colour Stops
Custom Stops
Hard Stops
Repeating
/* Custom colour stops */
.custom-stops {
background: linear-gradient(
to right,
#3b82f6 0%,
#3b82f6 20%,
#8b5cf6 80%,
#8b5cf6 100%
);
}
/* Hard stops (no blend) */
.hard-stops {
background: linear-gradient(
to right,
#f06 50%,
#48f 50%
);
}
/* Repeating gradient */
.stripes {
background: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#000 10px,
#000 20px
);
}Advanced Techniques
Text Overlay
Animated
Mesh Effect
/* Overlay gradient */
.overlay {
background:
linear-gradient(
rgba(0,0,0,0.7),
rgba(0,0,0,0.3)
),
url('image.jpg');
}
/* Animated gradient */
.animated {
background: linear-gradient(
-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
/* Multiple gradients (mesh) */
.mesh {
background:
linear-gradient(45deg, #f06 30%, transparent 30%),
linear-gradient(-45deg, #48f 60%, transparent 60%),
linear-gradient(90deg, #fd0 20%, transparent 20%);
}Radial Gradients
Create circular or elliptical gradients that radiate from a central point. Perfect for spotlights, bubbles, and organic shapes.
Basic Radial Gradients
Circle
Ellipse
Positioned
/* Circle gradient */
.circle {
background: radial-gradient(
circle,
#3b82f6,
#1e40af
);
}
/* Ellipse (default) */
.ellipse {
background: radial-gradient(
ellipse,
#ec4899,
#7c3aed
);
}
/* Positioned gradient */
.spotlight {
background: radial-gradient(
circle at top right,
#fbbf24,
#92400e
);
}Size & Shape Control
Closest Side
Farthest Corner
Fixed Size
/* Size keywords */
.closest {
background: radial-gradient(
circle closest-side,
#10b981,
#064e3b
);
}
.farthest {
background: radial-gradient(
ellipse farthest-corner,
#f59e0b,
#7c2d12
);
}
/* Fixed size */
.fixed {
background: radial-gradient(
100px 50px at center,
#8b5cf6,
#4c1d95
);
}Creative Effects
Sunburst
Bubble
Ripple
/* Sunburst effect */
.sunburst {
background: radial-gradient(
circle,
#fbbf24 0%,
#f59e0b 25%,
#d97706 50%,
#92400e 75%,
#451a03 100%
);
}
/* Bubble effect */
.bubble {
background: radial-gradient(
circle at 30% 30%,
rgba(255,255,255,0.8),
rgba(255,255,255,0.4) 30%,
rgba(59,130,246,0.6)
);
}
/* Repeating ripple */
.ripple {
background: repeating-radial-gradient(
circle,
#3b82f6,
#3b82f6 10px,
#60a5fa 10px,
#60a5fa 20px
);
}Conic Gradients
Create gradients that rotate around a center point. Perfect for pie charts, colour wheels, and unique visual effects.
Basic Conic Gradients
Colour Wheel
Pie Chart
Off-center
/* Colour wheel */
.wheel {
background: conic-gradient(
red,
yellow,
lime,
aqua,
blue,
magenta,
red
);
border-radius: 50%;
}
/* Pie chart */
.pie {
background: conic-gradient(
#3b82f6 0deg 90deg,
#8b5cf6 90deg 180deg,
#ec4899 180deg 270deg,
#f59e0b 270deg
);
border-radius: 50%;
}
/* Positioned */
.offset {
background: conic-gradient(
from 45deg at 25% 25%,
#f06,
#48f,
#f06
);
}Advanced Conic Effects
Checkerboard
Starburst
Spiral
/* Checkerboard */
.checkerboard {
background: conic-gradient(
#000 0deg 90deg,
#fff 90deg 180deg,
#000 180deg 270deg,
#fff 270deg
);
background-size: 50px 50px;
}
/* Starburst */
.starburst {
background: repeating-conic-gradient(
from 0deg,
#3b82f6 0deg 10deg,
#1e40af 10deg 20deg
);
}
/* Spiral effect */
.spiral {
background: conic-gradient(
from 0deg at 50% 50%,
hsl(0deg 100% 50%),
hsl(180deg 100% 50%),
hsl(360deg 100% 50%)
);
filter: blur(20px);
}Gradient Patterns
Combine multiple gradients to create complex patterns and textures using only CSS.
Geometric Patterns
Stripes
Chevron
Polka Dots
Grid
/* Diagonal stripes */
.stripes {
background: repeating-linear-gradient(
45deg,
#3b82f6,
#3b82f6 10px,
#60a5fa 10px,
#60a5fa 20px
);
}
/* Polka dots */
.dots {
background-color: #1e40af;
background-image: radial-gradient(
circle,
#3b82f6 25%,
transparent 25%
);
background-size: 20px 20px;
}Organic Textures
Noise
Paper
Fabric
Carbon
/* Paper texture */
.paper {
background:
radial-gradient(
ellipse at top,
rgba(255,255,255,0.5),
transparent
),
radial-gradient(
ellipse at bottom,
rgba(0,0,0,0.1),
transparent
),
#f5f5f5;
}
/* Carbon fiber */
.carbon {
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0,
linear-gradient(27deg, #222 5px, transparent 5px) 0 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%,
transparent 50%, transparent 75%, #242424 75%, #242424);
background-size: 20px 20px;
}Animated Gradients
/* Animated gradient background */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background: linear-gradient(
-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
/* Rotating conic gradient */
@keyframes rotate {
to { transform: rotate(360deg); }
}
.rotating {
background: conic-gradient(
from 0deg,
#f06,
#48f,
#f06
);
animation: rotate 4s linear infinite;
}Gradient Best Practices
Smooth Transitions
Use colour stops at 0% and 100% to avoid harsh edges at gradient boundaries.
Performance
Complex gradients can impact performance. Test on lower-end devices.
Accessibility
Ensure sufficient contrast when placing text over gradients.
Fallbacks
Always provide a solid colour fallback for older browsers.