What the comma order does when backgrounds stack
A CSS background is not limited to one image: several can be listed with commas and painted on top of each other, such as a texture over a photo over a pattern. This generator takes a value, position, size and repeat mode for each layer and writes the background-image, background-position, background-size and background-repeat lists in matching comma order, plus the shorthand equivalent.
The output follows the multiple background rules in the W3C CSS Backgrounds and Borders specification. The first value in each comma list paints on top, and background-color cannot be set per layer because an element has only one, so the shorthand carries it on the last layer. As of October 2026 every major browser supports this unprefixed.
This tool only arranges layers. It does not build gradient functions, so paste a url or a gradient string you already have into the layer value field. Values containing a semicolon or a brace are rejected because they would break the rule. Three layers are supported here; add more by editing the generated code directly.
Frequently asked questions
The first value in the comma-separated list paints on top. Layer 1 is closest to the viewer and the last layer sits directly above the background color.
No gradient functions are generated here. Paste a url or a gradient string you already have into the layer value field, and the tool only arranges the stacking order, position, size and repeat.
background-color cannot be set per layer; an element has exactly one. It paints behind every image layer, so in the shorthand it is written on the last layer only.