Skip to main content
Patterns.page

CSS Pattern Library

Controls

Selected Pattern

Cubes Illusion
3D
60px

Pattern Colors

Preview

Presets

Generated CSS

background-color: #374151;
background-image:
  linear-gradient(30deg, #6B7280 12%, transparent 12.5%, transparent 87%, #6B7280 87.5%, #6B7280),
  linear-gradient(150deg, #6B7280 12%, transparent 12.5%, transparent 87%, #6B7280 87.5%, #6B7280),
  linear-gradient(30deg, #6B7280 12%, transparent 12.5%, transparent 87%, #6B7280 87.5%, #6B7280),
  linear-gradient(150deg, #6B7280 12%, transparent 12.5%, transparent 87%, #6B7280 87.5%, #6B7280),
  linear-gradient(60deg, #111827 25%, transparent 25.5%, transparent 75%, #111827 75%, #111827),
  linear-gradient(60deg, #111827 25%, transparent 25.5%, transparent 75%, #111827 75%, #111827);
background-size: 60px 103.8px;
background-position: 0 0, 0 0, 30px 51.96px, 30px 51.96px, 0 0, 30px 51.96px;

Overview

A curated collection of CSS background patterns ready to use. Select a pattern, customize the colors and size, then copy the CSS code. All patterns are created with pure CSS using gradients - no images required.

What are CSS Patterns?

CSS patterns are repeating background designs created entirely with CSS, without using image files. They leverage CSS gradient functions like linear-gradient, radial-gradient, and repeating-linear-gradient to create geometric patterns. This approach results in lightweight, scalable backgrounds that adapt to any screen size while maintaining crisp edges.

How to Use the Pattern Library

Browse through the pattern collection by clicking on the pattern names below the preview. Each pattern comes with default colors that work well together, but you can customize them to match your design. Adjust the pattern size to make it larger or smaller. When you're happy with your pattern, click the "Copy CSS" button to copy the code to your clipboard, then paste it into your stylesheet.

Pattern Categories

3D Patterns: Create depth and dimension with optical illusions like cubes and isometric designs.

Geometric Patterns: Classic shapes like hexagons, diamonds, triangles, and checkerboards for clean, modern designs.

Stripes: Versatile linear patterns in vertical, horizontal, and diagonal orientations.

Dots & Grids: From polka dots to graph paper, perfect for backgrounds and overlays.

Common Use Cases

  • Website backgrounds and hero sections with subtle texture
  • Card backgrounds and UI component decorations
  • Section dividers and page separators
  • Overlay patterns on images for visual interest
  • Loading states and placeholder backgrounds
  • Print designs and presentations

Browser Support

All patterns in this library use standard CSS gradient functions that are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are required for current browser versions. The patterns are resolution-independent and will look sharp on all devices and screen densities.

Tips and Best Practices

  • Use subtle colors with good contrast for background patterns to avoid overwhelming content
  • Ensure sufficient contrast between pattern colors and any overlaid text
  • Smaller pattern sizes create denser textures, while larger sizes are more bold and prominent
  • Consider reducing opacity or using lighter colors for text-heavy sections
  • CSS patterns are more performant than image-based backgrounds and reduce page load times
  • Patterns scale perfectly across all screen sizes without pixelation
  • Test your patterns on different backgrounds and with real content before finalizing
  • Save your favorite color combinations for future use in your design system