Animación de burbuja en CSS puro, sin SVG, sin JS: una guía práctica y creativa para conseguir un efecto blob orgánico y vibrante usando solo CSS
Descripción general: El efecto blob en CSS puro crea una forma dinámica que se transforma suavemente, simulando una burbuja o masa líquida. No requiere JavaScript ni librerías externas; se basa en border-radius, degradados, filtros y animaciones con keyframes. Es ideal para marcos de perfil, animaciones de carga, decoraciones de fondo y diseños web modernos y coloridos.
Sobre Q2BSTUDIO: En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad y servicios cloud. Diseñamos soluciones de software a medida y aplicaciones a medida que integran IA para empresas, agentes IA y cuadros de mando con Power BI. Si buscas transformar procesos con tecnología segura y escalable, consulta nuestros servicios de desarrollo de aplicaciones y software a medida o explora nuestras soluciones de inteligencia artificial para empresas.
Uso típico: el blob se puede usar como contenedor para una imagen de perfil, un botón llamativo o un elemento decorativo. Propiedades clave: border-radius para la forma orgánica, linear-gradient para profundidad de color, animation para la morfología y filter drop-shadow para brillo y volumen. overflow hidden mantiene el contenido dentro de la forma.
Explicación técnica resumida: la animación morphBlob modifica border-radius en varios fotogramas clave para obtener una transición suave entre formas. Dos pseudoelementos difuminados crean capas brillantes que aportan profundidad. Al pasar el cursor la velocidad de morph aumenta y la sombra se intensifica, logrando una interacción atractiva sin una línea de JavaScript.
Ejemplo de HTML de uso: <div class=blob-loader><img src=https://img.freepik.com/free-photo/front-view-beautiful-woman_23-2148574859.jpg /></div>
CSS de ejemplo: body { background: #f44336; font-family: Source Code Pro, Inconsolata, Menlo, monospace; text-align: center; } .blob-loader { width: 500px; height: 500px; background: linear-gradient(135deg, #ff416c, #ff4b2b); border-radius: 52% 48% 66% 34%/38% 64% 36% 62%; filter: drop-shadow(0 0 12px #ff416c); animation: morphBlob 8s ease-in-out infinite; position: relative; margin: 4rem auto; cursor: pointer; transition: filter 0.3s; border: 5px dotted black; overflow: hidden; } .blob-loader::before, .blob-loader::after { content: none; position: absolute; inset: 0; border-radius: inherit; filter: blur(20px); opacity: 0.6; animation: morphBlob 8s ease-in-out infinite alternate; z-index: -1; } .blob-loader::before { background: #ff416c; animation-delay: 0s; } .blob-loader::after { background: #ff4b2b; animation-delay: 4s; } @keyframes morphBlob { 0% { border-radius: 52% 48% 66% 34%/38% 64% 36% 62%; } 25% { border-radius: 64% 36% 52% 48%/62% 38% 64% 36%; } 50% { border-radius: 58% 42% 42% 58%/58% 69% 31% 42%; } 75% { border-radius: 42% 58% 58% 42%/42% 31% 69% 58%; } 100% { border-radius: 52% 48% 66% 34%/38% 64% 36% 62%; } } .blob-loader:hover { animation-duration: 3s; filter: drop-shadow(0 0 24px #fff); } .blob-loader:hover::before, .blob-loader:hover::after { animation-duration: 3s; }
Cómo funciona en pocas líneas: morphing de forma mediante keyframes de border-radius; brillo y profundidad con pseudoelementos difuminados; interacción por hover para acelerar la animación y multiplicar el impacto visual. Todo esto con técnicas puras de CSS.
Beneficios para tu proyecto: efecto ligero y compatible, sin dependencias adicionales; fácil de integrar en componentes UI; excelente para mejorar la experiencia visual sin sacrificar rendimiento. En Q2BSTUDIO aplicamos estas y otras técnicas para crear interfaces atractivas y funcionales como parte de proyectos de software a medida, soluciones de inteligencia artificial, servicios de ciberseguridad, servicios cloud aws y azure, y proyectos de servicios inteligencia de negocio y power bi.
Si quieres que transformemos tu idea en una aplicación real, segura y escalable, contacta con nosotros y descubre cómo podemos acelerar tus proyectos con software a medida, ia para empresas y soluciones cloud.
.jpg)
.jpg)