CSS Data URI Converter
Convert an image or small file into a CSS data URI — get a ready-to-paste background-image rule, a url() value, an HTML <img> tag and the raw data URI. Runs in your browser.
Input
The file is read locally — it is never uploaded.
Output
More ways to use this tool
Embed widget
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Data URI Converter — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
Also available with
Guides
Turn a small image into CSS you can paste straight into a stylesheet. Upload a file and get four ready-made outputs: a complete background-image rule, the bare url("data:…") value, an HTML <img> tag, and the raw data URI.
How to use it
- Drop in an image (PNG, JPEG, GIF, WebP, SVG, or any other small asset).
- Set the CSS selector the rule should target and, optionally, the
alttext for the<img>tag. - Copy whichever snippet you need.
When to inline an image
Inlining saves an HTTP request, which helps for tiny icons, patterns and placeholders. Base64 adds about 33% to the size and the asset can no longer be cached on its own, so keep it for files of a few kilobytes — use a normal linked file for anything bigger.
Privacy
The file is read by your browser and converted locally; it is never uploaded.
Related tools
For just the raw string, use Data URI Generator or File to Base64. To turn Base64 back into a file, use Base64 to File.