tool · one of 34 free, no counter
Patterns
How do I make a background pattern without an image file?
Every pattern here is a background-image made of gradients - no file, no data URL, no request. That is what makes it worth having beside a page inspector rather than in a gallery: what comes out is a declaration that goes into a stylesheet, takes the page’s own colours, scales to any size and costs nothing to load.
Reach it Press ⌘ + K on any tab and type patterns. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
a css background pattern out of gradients, painted onto the selectionBuilding a hero backdrop, marking a staging environment, drawing a transparency board behind an image, or filling a placeholder block with something that reads as deliberate. Painting it onto the selection is how it gets judged against real content at a real width.
Asked about this tool
4 of themDoes it produce an SVG or a data URL?
No. Everything is gradients, which is why the output is a few lines of CSS rather than a base64 blob in your stylesheet, and why it scales without going soft.
What does painting it on the selection actually do?
It applies the declarations to the live element on the same undo stack as every other edit here. Clear LoupeKit changes puts the element back and nothing is written to the site.
Why does the mark stop getting wider at some point?
Because a mark as wide as its own tile is a solid fill wearing a pattern’s name. The thickness is clamped so a hairline of background always shows, which keeps the preview honest.
Can I use a transparent background?
Yes. The plate is emitted as background-color, so transparent there lets whatever is behind the element through while the pattern still draws.
how to use patterns
- Open Patterns and pick one of the eight rows.
- Set the colours from the page's own palette, and the scale you want.
- Preview it on the page. The patch is ephemeral, and it is the same declarations you will copy.
- Copy the declaration into the stylesheet: gradients only, so no file and no request.
70 of these · no host permissions · three free audits