Search pages
Search all CSS Showcase pages by name
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.
Stripes
Chevron
Polka Dots
Grid
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 fibre.
Noise
Paper
Fabric
Carbon
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.
Animated Gradients
Bring your gradients to life with CSS animations. Perfect for hero sections and attention-grabbing backgrounds.
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 optimisation.
Interactive Pattern Builder
Mix and match pattern types, colours, sizes, and angles to create your own custom CSS patterns.
Customise Pattern
.element {
background: repeating-linear-gradient(45deg, #3b82f6, #3b82f6 10px, #60a5fa 10px, #60a5fa 20px);
}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.
Continue Your Journey
Gradient patterns mastered! Explore more visual effects to create stunning designs.