Textures
CSS-based texture patterns for backgrounds and UI elements.
Dot Patterns
Polka Dots
Classic polka dot pattern.
Micro Dots
Tiny dot pattern for subtle texture.
Halftone
Print-style halftone dot pattern.
Grid Patterns
Grid
Simple grid pattern.
Grid Dark
Grid pattern for dark backgrounds.
Graph Paper
Engineering graph paper style.
Isometric Grid
3D isometric grid pattern.
Line Patterns
Horizontal Lines
Simple horizontal lines.
Vertical Lines
Simple vertical lines.
Diagonal Lines
45-degree diagonal lines.
Cross Hatch
Crossed diagonal lines.
Geometric Patterns
Checkerboard
Classic checkerboard pattern.
Diamond
Diamond/rhombus pattern.
Zigzag
Zigzag/chevron pattern.
Triangles
Repeating triangle pattern.
Material Textures
Noise Light
Subtle noise texture for light backgrounds.
Carbon Fiber
Carbon fiber weave pattern.
Linen
Fabric linen texture.
Paper
Subtle paper texture.
Brushed Metal
Brushed aluminum/steel texture.
Dark Metal
Dark brushed metal texture.
Marble
White marble with gray veins.
Dark Marble
Dark marble with subtle veins.
Wood Grain
Natural wood grain pattern.
Dark Wood
Dark walnut wood texture.
Concrete
Raw concrete texture.
Leather
Premium leather texture.
Denim
Blue denim fabric texture.
Silk
Smooth silk/satin texture.
Frosted Glass
Frosted glass blur effect.
Brick
Red brick wall pattern.
Sand
Beach sand texture.
Waves
Water wave pattern.
Terrazzo
Modern terrazzo flooring pattern.
Granite
Speckled granite stone texture.
Cork
Cork board texture.
Best Practices
- Subtlety is key - Textures should enhance, not distract. Keep opacity low.
- Performance - CSS patterns are more performant than images. Use them when possible.
- Contrast - Ensure text remains readable over textured backgrounds.
- Dark mode - Create inverted versions for dark backgrounds.
- Scale - Adjust background-size based on viewport and context.
- Combine - Layer textures with gradients for richer effects.