A background that stays out of the way
A faint grid can suggest a dashboard without inventing data. Dots can separate a hero area from the rest of a page. Stripes can mark a reserved image region in a wireframe. Use the gradient for a large visual placeholder before photography or illustration is ready.
Use the SVG in a page or a design tool
- Choose a pattern and set the dimensions of the image.
- Choose two colors. Start with a pale base and a nearby pattern color when text will sit on top.
- Copy CSS into a CSS rule, or download the SVG and import it into your design tool.
- Copy the settings link if someone else should be able to edit the same background.
How sizing and repetition work
The SVG has an explicit width, height and viewBox. The copied CSS uses that width and height as background-size. CSS repeats backgrounds by default; add background-repeat: no-repeat and background-size: cover when you want one image to fill a block. A gradient may show an edge if repeated, so use no-repeat for a single continuous gradient.
.placeholder-card {
/* Paste the generated background-image here. */
background-repeat: no-repeat;
background-size: cover;
}Keep decorative backgrounds accessible
This tool does not evaluate text contrast. Check the foreground text against the darkest and lightest parts of your background, and reduce pattern contrast if the text becomes difficult to read. Use CSS for decoration. When an SVG is a purely decorative img, give it an empty alt attribute; meaningful images still need descriptive alternative text.
What does the settings link share?
Only the pattern, dimensions, colors, spacing, weight and angle are in the link fragment after #. There are no names, uploads or external images. Generation happens in your browser; you can save the SVG and host it with your project. Site analytics and ads are separate from the generated artwork.