SVG to CSS Background

Generate a CSS `background-image` rule with your SVG embedded as a Base64 Data URI.

Drag & Drop your SVG files here

or

Max file size: 5MB. SVG format only.

    Embedding SVGs in CSS

    Using a Data URI allows you to embed an entire SVG graphic directly into your CSS file, avoiding extra HTTP requests for background images.

    This tool takes your SVG, encodes it using Base64, and wraps it in the correct CSS `url('data:image/svg+xml;base64,...')` syntax.

    1. Upload your SVG.
    2. Click "Convert".
    3. Copy the generated CSS `background-image` rule.
    4. Paste it into your stylesheet and add other background properties like `background-repeat`, `background-size`, `background-position` as needed.

    Embedding large or numerous SVGs this way can increase CSS file size significantly. Consider carefully for performance.