Blob detrás de una tarjeta
Gratis, sin registro, funciona en tu navegador.
Un blob situado detrás de una tarjeta o un bloque de texto, como color y no como una forma que nadie deba mirar directamente. El uso más indulgente para un blob y aquel en el que mejor funciona un preajuste casi circular.
La receta
| Forma | Blob suave |
|---|---|
| Exportar como | Fondo CSS |
| Tamaño | 491 B |
Paso a paso
- Elige Blob suave: la poca aleatoriedad se mantiene discreta detrás del contenido.
- Escoge un color cercano al fondo de tu página, un tono o dos de diferencia.
- Exporta como Fondo CSS y aplícalo al propio contenedor de la tarjeta.
- Usa `background-position` para descentrarlo: un blob centrado parece un error.
Lo que vas a copiar
.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 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat…Con más detalle
Mantén bajo el contraste. Un fondo decorativo que compite con el texto que tiene delante falla dos veces: distrae, y arrastra consigo el ratio de contraste del texto. Si no puedes leer la tarjeta con comodidad con el blob detrás, el blob es demasiado oscuro y no el texto demasiado claro.
Preguntas
¿De qué forma debería partir para Blob detrás de una tarjeta?
Blob suave, exportada como Fondo CSS. Esa combinación es la que vertebra esta página, y la vista previa de arriba es exactamente esa forma — pero es un punto de partida, no una regla. Todos los controles siguen activos en cuanto la abres.
¿Cuánto añade a la página?
Unos 491 bytes para esta combinación. Es menos que un solo icono y no necesita ninguna petición de red, porque la forma es marcado y no un archivo de imagen.
¿Funcionará en móvil?
Sí. Un divisor de onda está configurado para estirarse hasta su contenedor en lugar de mantener su proporción, que es lo que permite que una sola forma cubra cualquier ancho de pantalla sin bandas negras. Los blobs mantienen sus proporciones, porque un blob estirado no es más que una elipse.
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.