SVG como fondo CSS
Convierte tu SVG en un data-URI listo para usar como fondo CSS. Sin archivos extra, gratis y sin registro.
Resultado
¿Cómo usar esta herramienta?
Convierte tu SVG en un data-URI listo para usar como fondo CSS.
Escribe tus datos, pulsa Convertir a CSS y obtén el resultado al instante. Puedes copiarlo con el botón «Copiar resultado». Todo se calcula en tu navegador: tus datos no salen de tu dispositivo.
Preguntas frecuentes
¿Cómo convierto un SVG a fondo CSS?
Pega tu código SVG y pulsa Convertir a CSS: obtendrás el data-URI listo para usar como fondo en tu hoja de estilos.
¿Qué es un data-URI?
Codifica el SVG para que el navegador lo lea dentro de una URL: así evitas un archivo extra y el fondo carga al instante.
¿El resultado está listo para pegar?
Sí, el resultado usa url("data:image/svg+xml,...") listo para la propiedad background.
¿Debo crear una cuenta?
No hace falta: la herramienta funciona sin registro y sin iniciar sesión.
Herramientas relacionadas de Color y diseño
Comprimir SVG
Reduce el tamaño de tu SVG quitando comentarios y espacios sobrantes, sin perder calidad.
Usar gratisProbar fuente
Mira cómo se ve tu texto con distintas fuentes del sistema antes de decidir.
Usar gratisInterlineado
Calcula el interlineado (line-height) ideal según tu tamaño de fuente.
Usar gratisTema claro/oscuro CSS
Genera variables CSS para modo claro y oscuro con tus colores.
Usar gratisGrid CSS
Crea layouts con CSS Grid: columnas, filas y espacios con vista previa.
Usar gratisFlexbox
Genera contenedores flexibles con la alineación y el espaciado que elijas.
Usar gratis