CSS Patterns

Backgrounds in pure CSS, no image file needed. Pick a pattern, copy the code or adjust colors and size in the editor.

• Polka Dots

  Evenly spaced dots on a square grid, the classic for playful surfaces.

  Dots

• Staggered Dots

  Dots in offset rows, denser and calmer than a straight grid.

  Dots

• Two-Tone Dots

  Staggered dots that alternate between two colors.

  Dots

• Mixed Dots

  Large and small dots in two colors, alternating in a relaxed rhythm.

  Dots

• Rings

  Circle outlines on a grid, light and airy.

  Dots

• Targets

  Concentric rings in two colors, like tiny targets.

  Dots

• Grid Lines

  Thin lines on a square grid, rotatable to any angle.

  Grid

• Graph Paper

  A fine minor grid with a bold major line every five cells.

  Grid

• Dotted Grid

  Grid lines with a dot on every crossing.

  Grid

• Crosshatch

  Diagonal lines in both directions, like a lattice or hatching.

  Grid

• Bricks

  A running bond brick wall drawn as mortar lines.

  Grid

• Tiles

  Square tiles in two colors with narrow grout lines.

  Grid

• Stripes

  Wide stripes at any angle you like.

  Stripes

• Candy Stripes

  Two colors with narrow gaps, like a candy cane.

  Stripes

• Pinstripes

  Fine lines with lots of space, elegant and understated.

  Stripes

• Tricolor Stripes

  Equal stripes in two colors plus the background.

  Stripes

• Gingham

  Translucent stripes in both directions create the classic check.

  Stripes

• Plaid

  Wide and narrow stripes in two colors, crossed like woven tartan.

  Stripes

• Barcode

  Irregular lines like a barcode, decorative and not machine readable.

  Stripes

• Ripples

  Concentric rings from the center, like ripples on water.

  Waves

• Sunrise

  Wide arcs in two colors rising from the bottom edge.

  Waves

• Wavy Lines

  Smooth wavy lines built from half circles, row after row.

  Waves

• Scallops

  Rows of half circles with a small accent, like a scalloped edge.

  Waves

• Scales

  Overlapping arcs like fish scales or roof tiles.

  Waves

• Rainbows

  Little three-band rainbows, row after row.

  Waves

• Checkerboard

  Alternating squares, as crisp as a chessboard.

  Geometric

• Diamonds

  Squares standing on their tips in a dense grid.

  Geometric

• Argyle

  Diamonds with fine diagonal lines, known from socks and sweaters.

  Geometric

• Zigzag

  Bold zigzag bands running across the surface.

  Geometric

• Chevron

  Zigzag bands in two colors plus the background, with a seventies feel.

  Geometric

• Triangles

  Every tile split along its diagonal, forming rows of triangles.

  Geometric

• Pinwheel

  Four blades per tile that turn into pinwheels.

  Geometric

• Crosses

  Plus signs on a regular grid.

  Geometric

• Squares

  Small squares with space around them, calm and orderly.

  Geometric