tool · one of 34free, 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 itPress ⌘+K on any tab and type patterns.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin 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.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits