Overview
Build a complete background-image rule two ways: point it at an image URL and dial in background-size (auto, cover, or contain), background-position (center, top, bottom, left, or right), background-repeat (no-repeat, repeat, repeat-x, or repeat-y), and background-attachment (scroll or fixed) - or switch to a linear or radial gradient mode and pick an angle (linear) and two colors. The live preview renders the URL purely as a CSS background value in the browser's own normal image-loading path - no server-side fetch of the URL is ever made, and the URL is never used to construct raw HTML. In the generated CSS text, the URL is safely wrapped in url("...") with any embedded quote characters escaped. Runs entirely client-side.
Best for: Building a full background-image declaration with sizing and positioning without memorizing the property names
How to use this tool
- Choose a mode. Image URL, linear gradient, or radial gradient.
- Adjust the settings. Size, position, repeat, and attachment for images; angle and colors for gradients.
- Copy the CSS. Grab the full, ready-to-paste background-image rule (and related properties for image mode).
Why use this tool
Image and gradient in one tool
Switch between an image URL and a linear or radial gradient without starting over.
All the common sizing options
Size, position, repeat, and attachment are covered without memorizing each property's exact values.
Safe URL handling
The URL is only ever used as a CSS value for preview and output - never fetched server-side or injected as raw HTML.
Frequently asked questions
No - the URL is only ever handed to the browser as a standard CSS background-image value for the live preview, the same as the browser would do with any stylesheet. Nothing about the URL is sent to or processed by a server.
The URL is wrapped in url("...") with any double quote inside it escaped, so the generated CSS text stays valid even if the URL itself happens to contain a quote character.