CSS background
Free, no sign-up, runs in your browser.
The same SVG, percent-encoded into a `background-image` data URI. Use it when you cannot add an element to the page and have to decorate one that already exists — a section, a card, a header you do not control the markup of.
A CSS background export, trimmed to the first few lines
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}What to know
- No extra element and no network request: the shape travels inside the stylesheet.
- Percent-encoded rather than base64, which is about a third smaller for the same image.
- Every `#` is encoded, which is the difference between a background that paints and one that silently does not.
- Larger than the raw SVG, because escaping costs three characters for each one it replaces.
Browser support
Universal. Data URIs in `background-image` work everywhere. The only compatibility trap is encoding, not support — and it is handled in the output rather than left to you.
Size across the presets
Every preset this format can express, measured as the generator emits it. The smallest is Hexagon at 312 bytes; the largest is Layered waves at 1,071 bytes. Point count is what drives the difference — each extra point adds a full cubic segment of coordinates.
| Format | Size |
|---|---|
| Hexagon | 312 B |
| Crystal | 317 B |
| Faceted gem | 343 B |
| Rounded triangle | 378 B |
| Mountain peaks | 392 B |
| Swoosh | 407 B |
| Sharp zigzag | 425 B |
| Deep wave | 443 B |
| Pebble | 455 B |
| Cloud edge | 456 B |
| Arch cut-out | 480 B |
| Gentle wave | 483 B |
| Soft blob | 491 B |
| Stair step | 519 B |
| Scallop | 543 B |
| Organic blob | 563 B |
| Sparkle | 569 B |
| Organic wave | 639 B |
| Star burst | 712 B |
| Footer wave | 718 B |
| Flower | 718 B |
| Bubble | 720 B |
| Pixel edge | 740 B |
| Splat | 802 B |
| Ripple | 816 B |
| Layered waves | 1,071 B |
In more detail
This is the export with a real trap in it. An unencoded `#` inside a data URI ends the URL: the browser treats everything after it as a fragment identifier, the SVG is malformed, and the background simply does not appear — with no console error and no network entry to search for. Since every colour in the markup is a hex literal, the very first fill truncates the whole thing. Some generators dodge this by falling back to base64, which is correct but needlessly larger. Here the `%` is escaped first and the `#` immediately after, which is the only order that works.
Questions
Which shapes work as CSS background?
This format covers Wave, Blob. That is a real constraint rather than a limitation of this tool — where a generator is missing from that list, the format genuinely cannot express it, and offering it anyway would hand you something that silently draws the wrong shape.
How big is a CSS background export?
Between 312 and 1,071 bytes across the 26 presets that support it. Fewer points is the lever that matters; smoothness and colour cost nothing.
Can I edit it by hand afterwards?
Yes. The output is plain text with no generator comment, no identifying markup and no link back here. Change the colours, rename the class, or paste the path into your own SVG — nothing downstream depends on it staying as it was.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.