Base64 CSS Pattern Generator

Base64 CSS pattern generator: draw a tile, copy the CSS

This free tool turns a tiny pixel drawing into a tileable CSS background-image encoded as a base64 PNG data-URI. Instead of hosting a separate .png file, you paste a few lines of CSS and the pattern travels inline with your stylesheet — no extra HTTP request, nothing to upload, and it works offline.

What is a base64 CSS background image?

A base64 CSS background image is a small raster image embedded directly inside your CSS as a data-URI, like background-image: url("data:image/png;base64,…"). The browser decodes the base64 string into a PNG in memory and paints it, so the image never needs its own network round-trip. For small, repeating tiles this is the fastest way to ship a background pattern.

How to generate a base64 CSS background pattern

1. Set the tile size — pick a width and height from 1 to 64 pixels. Smaller tiles (8×8 to 16×16) keep the data-URI tiny and tile seamlessly.
2. Choose rgba colors — set a draw color and a background color, each with an alpha slider so you can use semi-transparent or fully transparent pixels.
3. Draw your pattern — click or drag across the visible pixel grid to paint, and click a painted pixel to erase it.
4. Copy the CSS — the background-image data-URI updates live; copy it and paste it into your stylesheet. Add background-repeat: repeat and the tile fills any element.

Why use a data-URI background instead of an image file?

• Zero extra requests — the tile ships with your CSS, removing a render-blocking image fetch.
• No asset hosting — nothing to upload, version, or path-manage; the pattern lives in one place.
• Seamless tiling — a few-pixel PNG repeats across any size element with background-repeat: repeat.
• Crisp pixels — pair with image-rendering: pixelated to keep hard pixel edges when scaled.
• True transparency — the exported PNG keeps per-pixel rgba alpha, so patterns layer over any color.

Popular CSS patterns you can build

• Polka / dot patterns — one dot in a 10×10 transparent tile (the classic hero-section dot grid).
• Checkerboards — a 2×2 two-tone tile for transparency indicators and retro backgrounds.
• Stripes — a 1×N or N×1 tile for vertical, horizontal, or diagonal lines.
• Pixel grids and graph paper — single edge pixels that repeat into clean grid lines.
• Noise and texture — scattered semi-transparent pixels for subtle grain.

Example: a tileable dot pattern in CSS

.dots {
  background-image: url("data:image/png;base64,iVBORw0KGgo…");
  background-repeat: repeat;
  image-rendering: pixelated;
}

Draw a single pixel in a 10×10 transparent tile above, copy the generated CSS, and you get exactly this — a repeating dot field with no image file.

Generate patterns with an API or an MCP server (for AI)

Everything the UI does is also available headlessly. A plain HTTP API accepts a JSON spec (width, height, background, pixels) and returns the data-URI and CSS, so you can script pattern generation in any language. For AI assistants, an MCP (Model Context Protocol) server exposes generate_css_pattern and draw_dot tools so a model can produce CSS patterns on demand — see the dedicated AI CSS pattern generator guide for the MCP and API details. You can also browse the source and docs or connect to the MCP endpoint at https://mcp.eyn.art/.

Frequently asked questions

What is a base64 CSS background image?

It is a small image encoded directly in your stylesheet as a data-URI, e.g. url("data:image/png;base64,…"). The browser decodes it inline, so no separate image file is downloaded.

How do I create a tileable CSS pattern?

Draw a small tile (often 8×8 to 16×16 px), export it as a base64 PNG, and set background-repeat: repeat. The browser tiles the tiny image to form a seamless pattern.

Are base64 data-URI backgrounds good for performance?

For tiny tiles they are excellent — they remove an HTTP request and ship with your CSS. They are not recommended for large images, which inflate the stylesheet and cannot be cached separately.

Can I use transparency in the pattern?

Yes. Both the draw color and background color use rgba with an alpha slider, and the exported PNG preserves per-pixel transparency.

Can an AI assistant generate patterns automatically?

Yes. The tool ships an MCP server with generate_css_pattern and draw_dot tools, plus an HTTP API, so assistants and scripts can produce CSS patterns without the UI.