b2KIT

Pattern / Texture CSS Generator

Generate repeating CSS patterns and textures with customizable colors and scale.

How to Use Pattern / Texture CSS Generator

  1. 1

    Choose a pattern

    Select stripes, dots, waves, chevrons, or another pattern type.

  2. 2

    Customize the design

    Adjust colors, spacing, scale, and rotation of the pattern.

  3. 3

    Export the texture

    Download the pattern as a PNG, SVG, or CSS background.

Tested tool guide Tested browser tools Checked August 16, 2026

What Pattern / Texture CSS Generator does, with a checked example

Choose a pattern family - stripes, checkerboard, dots, or grid - pick two colors and a scale, and this tool returns a CSS background declaration you paste straight into a stylesheet. The output is built from CSS gradient functions rather than image files, so it stays sharp at any zoom and adds no download weight. The thing users misread most is the scale control: it sets the size of one repeating tile, not the size of the visible motif. A checkerboard tile holds a 2x2 block, so 40px in the scale field yields 20px squares; in a dot grid, the tile is the spacing, not the dot radius.

Worked example

A concrete input and expected output from the current implementation.

Input

Checkerboard: color 1 #111111, color 2 #ffffff, square size 24px

Expected output

background-color: #ffffff;
background-image: conic-gradient(#111111 0deg 90deg, #ffffff 90deg 180deg, #111111 180deg 270deg, #ffffff 270deg 360deg);
background-size: 48px 48px;

The conic gradient draws four alternating 90-degree quadrants, forming one 2x2 checkerboard tile. The scale field writes background-size as twice the requested square size, so 48px makes each quadrant exactly 24 x 24px, and the default background-repeat tiles it edge to edge with no visible seam.

How the result is produced

1

How the pattern is compiled

Each pattern family maps to one or more CSS gradient functions. Stripes become a repeating-linear-gradient with two color stops per stripe; the checkerboard becomes a conic-gradient split into four 90-degree quadrants; dots become a radial-gradient of a small solid circle fading out; grids layer two perpendicular repeating-linear-gradients. The snippet sets background-image to that value and background-color to the lighter color, and the browser's default background-repeat tiles it edge to edge.

2

The tile math

The scale field becomes background-size: the dimensions of one tile in pixels. Everything visible is drawn inside that tile; the motif is a fraction of it: a checkerboard draws a 2x2 block, making each square half the tile width; stripes draw one band per stop pair, so stripe width equals the gap between stops; a dot grid draws one dot per tile, so the tile equals the dot spacing.

Good uses

  • Deterministic avatar or event-tile backgrounds: derive a two-color stripe or checkerboard from a user id or event slug, so empty slots look intentional and stay visually distinct with zero image requests.
  • Printable ruled paper: notebook lines, graph-paper grids, and dot-grid planners generated as a print stylesheet, where the pattern is pure CSS and adds no heavy image assets.
  • Transparency indicator: the classic image-editor checkerboard behind a canvas, image uploader, or icon editor, so users can see which regions are actually transparent.

Limits and checks

  • Scale reads as tile, not motif: a checkerboard entered as 40px squares comes out as 20px squares because the snippet's background-size is the 2x2 tile, not the square. That is the pattern working as designed, not a bug - read background-size as the tile and divide by the motifs per row.
  • The lighter color is also the base: dot and grid patterns are mostly transparent, so the element's background shows through the gaps. If you paste only background-image and drop background-color, the pattern can vanish on a white page or glare on a dark one.
  • Texture here means geometry, not material: gradients cannot render noise, grain, or photographic texture, so the output is always a flat, deterministic repeat of one shape. A paper-grain or brushed-metal look needs an SVG feTurbulence filter or a raster image, not this tool.

Common questions

Does this work in every browser, and in email?

In browsers, yes: repeating-linear-gradient, conic-gradient, and radial-gradient are supported in all current browsers, including Safari and mobile Chrome, with no vendor prefixes. Email is a separate matter - the Windows Outlook desktop app ignores CSS background-image on many elements, so test any pattern you send in the actual clients you must support.

Can the tool make noise or photo-like textures?

No. CSS gradients can only draw smooth, geometric shapes, so output is limited to stripes, checks, dots, and grids. True noise or grain requires an SVG feTurbulence filter or a raster image. If the design calls for paper texture or brushed metal, generate it elsewhere and bring it in as a normal image.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.