Conversor de Data URI para CSS
Converta uma imagem ou arquivo pequeno em um data URI CSS — obtenha uma regra background-image pronta para colar, um valor url(), uma tag HTML <img> e o data URI bruto. Roda no seu navegador.
Entrada
O arquivo é lido localmente — nunca é enviado.
Saída
Mais formas de usar esta ferramenta
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Conversor de Data URI para CSS — 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>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
Também disponível via
Guias
Transforme uma imagem pequena em CSS que você pode colar diretamente em uma folha de estilos. Envie um arquivo e receba quatro saídas prontas: uma regra background-image completa, o valor url("data:…") puro, uma tag HTML <img> e o data URI bruto.
Como usar
- Envie uma imagem (PNG, JPEG, GIF, WebP, SVG ou qualquer outro recurso pequeno).
- Defina o seletor CSS que a regra deve atingir e, opcionalmente, o texto
altda tag<img>. - Copie o trecho que você precisa.
Quando incorporar uma imagem
Incorporar a imagem evita uma requisição HTTP, o que ajuda em ícones pequenos, padrões e placeholders. O Base64 aumenta o tamanho em cerca de 33% e o recurso não pode mais ser armazenado em cache por conta própria, então reserve isso para arquivos de alguns kilobytes — use um arquivo vinculado normal para qualquer coisa maior.
Privacidade
O arquivo é lido pelo seu navegador e convertido localmente; ele nunca é enviado.
Ferramentas relacionadas
Para apenas a string bruta, use o Gerador de Data URI ou o Arquivo para Base64. Para transformar Base64 de volta em um arquivo, use o Base64 para Arquivo.