buncha/code & dev/css-pattern

CSS Background Pattern Generator

Eight tileable backgrounds built with CSS gradients — zero images, infinite scaling. Use them as page backgrounds, section dividers, or texture under cards.

Pattern

Tile size — 20px

Foreground

Background

CSS

.bg {
  background-color: #FFF9F3;
  background-image: radial-gradient(#1F1F1F 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

Pure CSS gradients — no images, no JS, no payload cost.

Pairs well with

Base64 Encoder / Decoder

UTF-8-safe Base64 encode and decode. Handles emoji…

Binary Converter

Convert text to binary and binary to text.

CSS Checkbox & Switch Generator

Pure-CSS checkbox and toggle-switch styles that ov…

CSS Clip Path Generator

Visual editor for CSS clip-path polygon shapes. Dr…

About CSS Background Pattern Generator

Build tileable backgrounds with pure CSS gradients — dots, grid, lines, diagonals, stripes, checkers, plus signs, notebook paper. Adjustable tile size and two-colour control.

Everything happens on your device. Close the tab and it's gone.