Skip to content

CSS Pattern Backgrounds

Eight pure CSS gradient background patterns (dots, polka, grid, graph paper, stripes, crosshatch, checkerboard, zigzag) with a live scale slider.

Also known as: css background patterns, background pattern generator, polka dot background, grid background css, stripe pattern

Pure CSS Backgrounds Responsive #background #css #gradient #pattern #responsive

CSS Pattern Backgrounds live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

A gallery of eight repeating background patterns made only with CSS gradients: dots, polka, grid, graph paper, stripes, crosshatch, checkerboard and zigzag. It needs no image files and no SVG. A small slider rescales every pattern live. Use the patterns for hero sections, placeholders, cards, empty states or decorative page backgrounds.

How it works

The root section.pb-gallery holds a .pb-head with the title and a slider, and a ul.pb-grid of li.pb-tile items. Each tile has a .pb-swatch with one pattern class and a .pb-caption naming the technique.

Every pattern follows the same recipe. .pb-swatch paints --pb-bg as background-color, and each pattern class sets three custom properties: --pb-fg (the drawing color), --pb-bg and --pb-size (one repeat of the tile). The size used in the gradients is --pb-s, which is calc(var(--pb-size) * var(--pb-scale)).

  • .pb-dots and .pb-polka use radial-gradient circles. Polka adds a second layer shifted by half a tile.
  • .pb-grid-lines and .pb-graph draw 1px lines with horizontal and vertical linear-gradient layers. Graph paper adds a lighter minor grid at one fifth of the size, colored by --pb-fg-minor.
  • .pb-stripes and .pb-crosshatch use repeating-linear-gradient at -45 and 45 degrees.
  • .pb-checker is a single conic-gradient, and .pb-zigzag combines four 25% triangles.

The script listens for input on .pb-scale and writes the value to --pb-scale on its own gallery, so all eight patterns resize together. It also updates the .pb-scale-value output. Without JavaScript the patterns render at their default size.

Customization

  • --pb-fg and --pb-bg inside a pattern class such as .pb-stripes: change the two colors of that pattern. Yellow and black stripes become a soft brand stripe.
  • --pb-size in a pattern class: makes one repeat bigger or smaller, e.g. 40px for chunkier checkerboard squares.
  • --pb-scale on .pb-gallery: the default multiplier for all patterns. Change the min, max and step of the .pb-scale input to widen the slider range.
  • The calc(var(--pb-s) / 4) stops in .pb-stripes: change them for thinner or thicker stripes.
  • height in .pb-swatch: the preview height, 8.5rem on phones and 10.5rem from 960px.
  • To use a pattern on your own element, copy the pattern class, add background-color: var(--pb-bg) and define --pb-s, or replace it with a fixed length.

Use cases

  • Hero sections: a subtle texture behind the headline without image files
  • Cards and placeholders: patterned areas for empty states or image placeholders
  • Decorative page backgrounds: dots, grids or stripes that scale with one value

Accessibility

Each swatch is purely visual, so it has role="img" and an aria-label that names the pattern, such as "Checkerboard pattern". The slider is a native input type="range" inside a label, so it is keyboard operable with the arrow keys. It shows a visible :focus-visible outline, and the script sets aria-valuetext such as "1.5 times". Nothing animates, so no reduced-motion handling is needed. When you put text on top of a busy pattern, add a solid or semi-opaque panel behind the text to keep it readable.

Usage notes

Gradient patterns scale without blur on high-DPI screens and add no extra network requests. Several galleries can share a page, because each slider only updates its own .pb-gallery.

CSS Pattern Backgrounds at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile
Category
Backgrounds
License
Free for personal and commercial use

Questions about this template

Can I use the CSS Pattern Backgrounds code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

CSS Pattern Backgrounds – Pure CSS backgrounds component screenshot
CSS Pattern Backgrounds · Pure CSS Backgrounds

More Backgrounds

Animated Blob Background – Pure CSS backgrounds preview

Animated Blob Background

Pure CSS animated background with blurred, morphing color blobs drifting behind a hero headline, with a pause button and reduced-motion support.

Pure CSS Backgrounds
Animated Gradient Background – Pure CSS backgrounds preview

Animated Gradient Background

Pure CSS hero section with a slowly shifting multi-color gradient, drifting blurred blobs and a grain overlay, customizable through CSS variables.

Pure CSS Backgrounds