Fondo CSS
Gratis, sin registro, funciona en tu navegador.
El mismo SVG, codificado en porcentaje dentro de un data URI de `background-image`. Úsalo cuando no puedas añadir un elemento a la página y tengas que decorar uno que ya existe: una sección, una tarjeta, una cabecera cuyo marcado no controlas.
Una exportación de Fondo CSS, recortada a las primeras líneas
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}Lo que conviene saber
- Sin elemento extra y sin petición de red: la forma viaja dentro de la hoja de estilos.
- Codificado en porcentaje en lugar de base64, que es cerca de un tercio más pequeño para la misma imagen.
- Cada `#` está codificado, que es la diferencia entre un fondo que se pinta y uno que en silencio no lo hace.
- Más grande que el SVG en bruto, porque escapar cuesta tres caracteres por cada uno que sustituye.
Compatibilidad de navegadores
Universal. Los data URI en `background-image` funcionan en todas partes. La única trampa de compatibilidad es la codificación, no el soporte, y se resuelve en la salida en lugar de dejártela a ti.
Tamaño en todos los preajustes
Todos los preajustes que este formato puede expresar, medidos tal como los emite el generador. El más pequeño es Hexágono con 312 bytes; el mayor es Ondas en capas con 1071 bytes. El número de puntos es lo que marca la diferencia: cada punto extra añade un segmento cúbico completo de coordenadas.
| Formato | Tamaño |
|---|---|
| Hexágono | 312 B |
| Cristal | 317 B |
| Gema facetada | 343 B |
| Triángulo redondeado | 378 B |
| Picos de montaña | 392 B |
| Barrido | 407 B |
| Zigzag marcado | 425 B |
| Onda profunda | 443 B |
| Guijarro | 455 B |
| Borde de nube | 456 B |
| Arcos recortados | 480 B |
| Onda suave | 483 B |
| Blob suave | 491 B |
| Escalones | 519 B |
| Festón | 543 B |
| Blob orgánico | 563 B |
| Destello | 569 B |
| Onda orgánica | 639 B |
| Estrella | 712 B |
| Onda de pie de página | 718 B |
| Flor | 718 B |
| Burbuja | 720 B |
| Borde pixelado | 740 B |
| Salpicadura | 802 B |
| Ondulación | 816 B |
| Ondas en capas | 1071 B |
Con más detalle
Esta es la exportación con una trampa de verdad. Un `#` sin codificar dentro de un data URI termina la URL: el navegador trata todo lo que viene después como un identificador de fragmento, el SVG queda mal formado y el fondo simplemente no aparece — sin error en consola y sin ninguna entrada de red que buscar. Como cada color del marcado es un literal hexadecimal, el primerísimo relleno corta la cosa entera. Algunos generadores esquivan esto recurriendo a base64, que es correcto pero innecesariamente más grande. Aquí se escapa primero el `%` y el `#` justo después, que es el único orden que funciona.
Preguntas
¿Qué formas funcionan como Fondo CSS?
Este formato cubre Onda, Blob. Es una restricción real y no una limitación de esta herramienta: cuando falta un generador en esa lista, el formato realmente no puede expresarlo, y ofrecerlo de todos modos te entregaría algo que dibuja en silencio la forma equivocada.
¿Cuánto ocupa una exportación de Fondo CSS?
Entre 312 y 1071 bytes en los 26 preajustes que lo admiten. Menos puntos es la palanca que importa; la suavidad y el color no cuestan nada.
¿Puedo editarlo a mano después?
Sí. La salida es texto plano sin comentarios del generador, sin marcas identificativas y sin enlaces de vuelta aquí. Cambia los colores, renombra la clase o pega el trazado en tu propio SVG: nada de lo que viene después depende de que siga igual.
Cada cifra y cada forma de esta página se produjeron ejecutando el generador durante la compilación, así que describen la herramienta que estás a punto de usar y no una versión que existió una vez.