Can an AI assistant generate CSS patterns?

Yes. This tool exposes a Model Context Protocol (MCP) server with generate_css_pattern and draw_dot tools. Any MCP-capable assistant can call them to turn a prompt into a tileable base64 CSS background-image data-URI.

How do I connect the CSS pattern MCP server?

Run: claude mcp add --transport http b64-pattern-gen https://mcp.eyn.art/ — the server is a public, stateless Streamable-HTTP MCP endpoint, no API key required.

Is there an HTTP API instead of MCP?

Yes. POST a JSON spec to https://b64.eyn.art/api/generate with width, height, optional background and a pixels array, and it returns the data-URI, the CSS and the raw base64.

For AI assistants & scripts

The AI CSS pattern generator: MCP server & API

Q: Why does Claude Code generate a CSS gradient instead of a base64 pattern?

A gradient is pure CSS the model can write from memory with no tool call, so it is the default for repeating backgrounds. But gradients are not pixel-perfect: hard edges go soft and repeats drift off the pixel grid and show seams. With this MCP connected, the assistant calls generate_css_pattern and returns an exact, pixel-perfect base64 tile instead.

Hand the busywork to your assistant. This tool exposes a Model Context Protocol (MCP) server and a plain HTTP API that turn a request like “a subtle 12×12 polka-dot tile in brand purple” into a ready-to-paste, tileable background-image base64 data-URI — no clicking around a UI.

← Open the visual editor instead

Why not just let the AI write a CSS gradient?

Ask an agentic coding assistant like Claude Code for a repeating background and it will almost always reach for linear-gradient, radial-gradient or repeating-linear-gradient — pure CSS it can write from memory, no tool required. That’s the path of least resistance, and for soft, smooth fills it’s perfect.

The catch: gradient “patterns” are not pixel-perfect. They’re resolution-independent math, so a crisp little tile — a 1px grid line, a single-pixel dot, a hard-edged checker, retro pixel art — comes out subtly wrong:

Soft, anti-aliased edges where you wanted hard pixels — gradients blur at the boundary instead of snapping to a pixel.
Fractional-pixel drift and seams — sizing a repeat in px/% rarely lands exactly on the grid, so the tile shimmers or shows a faint seam when it repeats.
Sub-pixel rendering differs per browser/zoom, so the same gradient stack looks slightly different across devices.
Verbose and fragile — anything beyond a couple of stops becomes an unreadable stack of layered gradients that’s painful to tweak.

How this MCP fixes it

Instead of approximating a pattern with gradient math, this MCP server hands the assistant a tool that renders the exact pixels you specify into a real PNG tile and returns it as a base64 background-image data-URI. Every pixel is placed deliberately, so the result is truly pixel-perfect, repeats with a seamless seam, and stays crisp with image-rendering: pixelated — identical in every browser. The AI keeps the convenience of “just describe it,” but the output is an exact tile, not a best-effort gradient guess.

So: gradients for smooth fades, this MCP for anything that has to be pixel-accurate. Claude Code (or any MCP client) calls generate_css_pattern, you paste the CSS, done.

Connect the MCP server

The server is a public, stateless Streamable-HTTP MCP endpoint — no API key, no sign-up. In Claude Code (or any MCP-capable client) run:

claude mcp add --transport http b64-pattern-gen https://mcp.eyn.art/

That registers two tools your assistant can call on demand:

generate_css_pattern — give it a tile width/height, an optional background colour and a list of coloured pixels; it returns the data-URI, the full CSS rule and the raw base64.
draw_dot — the one-call shortcut for the classic single-dot polka tile.

Or call the HTTP API

Prefer a script? POST a JSON spec to the API and get the same result back — works from any language, no dependencies:

curl -X POST https://b64.eyn.art/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "width": 10, "height": 10,
    "background": "rgba(0,0,0,0)",
    "pixels": [{ "x": 0, "y": 0, "color": "rgba(142,84,233,1)" }]
  }'

Response:

{
  "dataUrl": "data:image/png;base64,iVBORw0KGgo…",
  "css": "background-image: url(\"data:image/png;base64,…\");\nbackground-repeat: repeat;",
  "base64": "iVBORw0KGgo…",
  "width": 10, "height": 10
}

Why generate CSS patterns with AI?

Describe, don’t draw — “diagonal hairline grid, 1px lines, 8px spacing” is faster to say than to paint pixel by pixel.
Inline, zero requests — the result is a base64 data-URI that ships inside your CSS, so there’s no image file to host and no extra HTTP request.
Iterate in the chat — tweak colours, density or tile size in follow-up turns and paste the final rule straight into your stylesheet.
Scriptable — generate a whole theme’s worth of tiles in a loop via the HTTP API.

Frequently asked questions

Do I need an API key or account?

No. Both the MCP server and the HTTP API are free and public, like the visual tool. Abuse is handled with server-side rate limiting, not logins.

Which assistants work with it?

Any client that speaks the Model Context Protocol over HTTP — including Claude Code and the Claude apps. Point it at https://mcp.eyn.art/.

What’s the difference between this and the visual tool?

Same engine, different front door. The visual editor is a pixel grid you draw on; the MCP server and API let an assistant or script produce the exact same base64 CSS without the UI.

Why does Claude Code generate a CSS gradient instead of a base64 pattern?

Because a gradient is pure CSS the model can write from memory, with no tool call — it’s the default for repeating backgrounds. The trade-off is that gradients aren’t pixel-perfect: hard edges go soft, repeats drift off the pixel grid and show seams. With this MCP connected, the assistant calls generate_css_pattern and returns an exact, pixel-perfect base64 tile instead.

Open the Base64 CSS Pattern Generator →