Gradient Patterns
Combine multiple gradients to create stunning patterns, textures, and animated backgrounds with pure CSS.
Geometric Patterns
Create repeating patterns like stripes, chevrons, dots, and grids using gradient repetition.
Pattern Gallery
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: #ddd3ee;
background-image: radial-gradient(
circle,
#8b5cf6 25%,
transparent 25%
);
background-size: 20px 20px;
}
/* Grid pattern */
.grid {
background:
linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
background-size: 20px 20px;
background-color: #f3f4f6;
}
/* Chevron pattern */
.chevron {
background:
repeating-linear-gradient(
45deg,
#3b82f6,
#3b82f6 10px,
transparent 10px,
transparent 20px
),
repeating-linear-gradient(
-45deg,
#8b5cf6,
#8b5cf6 10px,
transparent 10px,
transparent 20px
);
}
The key to creating patterns is using repeating-linear-gradient() or
repeating-radial-gradient() with carefully placed colour stops. By setting
a background-size, you control the pattern's scale.
Organic Textures
Layer multiple gradients to create realistic textures like paper, fabric, and carbon fiber.
Texture Gallery
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;
background-color: #131313;
}
/* Fabric weave */
.fabric {
background:
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 1px,
transparent 1px,
transparent 2px
),
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 1px,
transparent 1px,
transparent 2px
),
#e5e7eb;
}Complex textures are built by layering multiple gradients with different angles, sizes, and positions. The magic happens when you combine transparency with subtle colour variations. Don't be afraid to experiment!
Animated Gradients
Bring your gradients to life with CSS animations. Perfect for hero sections and attention-grabbing backgrounds.
Animation Showcase
/* 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,
#3b82f6,
#8b5cf6,
#ec4899,
#f59e0b,
#3b82f6
);
animation: rotate 5s linear infinite;
}
/* Wave effect */
@keyframes wave {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.wave {
background: linear-gradient(
90deg,
#3b82f6,
#8b5cf6,
#ec4899,
#3b82f6
);
background-size: 200% 100%;
animation: wave 4s linear infinite;
}
To animate gradients, you can't directly animate the gradient itself. Instead, create
a large gradient (using background-size) and animate the
background-position. For conic gradients, animate the
transform: rotate() property instead.
Performance tip: Animated gradients can be resource-intensive. Use them
sparingly and test on lower-end devices. Consider using will-change: transform
for rotation animations to hint to the browser about optimization.
Gradient Best Practices
Smooth Transitions
Use colour stops at 0% and 100% to avoid harsh edges at gradient boundaries. For smoother blends, add intermediate colour stops.
Performance
Complex gradients and animations can impact performance. Test on lower-end devices and consider simplifying patterns for mobile.
Accessibility
Ensure sufficient contrast when placing text over gradients. Use tools like WebAIM's contrast checker to verify readability.