Vista Previa
Tu efecto aparece aquí
Crea efectos box-shadow multicapa y estilos de glassmorphism profesionales de forma visual, instantánea y completamente gratuita. Copia el código en CSS, Variables CSS o formato Tailwind.
Mueve los deslizadores de Offset X, Offset Y, Blur y Spread para ajustar cada capa de sombra. Puedes añadir hasta 5 capas independientes para crear efectos de profundidad realistas. Una vez satisfecho, copia el código generado con un clic.
El sistema de historial con Deshacer/Rehacer te permite experimentar libremente sin miedo a perder tu progreso, y puedes guardar tus configuraciones favoritas en el navegador.
El glassmorphism (o efecto cristal) es una tendencia de diseño UI que simula vidrio
esmerilado mediante la propiedad CSS backdrop-filter: blur() combinada con fondos
semi-transparentes y bordes translúcidos.
Con esta herramienta puedes ajustar el blur de fondo, la opacidad, el radio de esquinas y la saturación para obtener el efecto de cristal perfecto.
Puedes añadir hasta 5 capas de sombra independientes. Cada capa tiene sus propios parámetros de offset,
blur, spread, opacidad y color. Las capas se combinan automáticamente en la propiedad
box-shadow.
box-shadow tiene soporte universal en todos los navegadores modernos.
backdrop-filter (para glassmorphism) requiere activación en Firefox (configuración
layout.css.backdrop-filter.enabled) y tiene soporte completo en Chrome, Edge y Safari.
Los favoritos se guardan en el localStorage de tu navegador. Son persistentes mientras no
borres los datos del navegador, pero son locales a tu dispositivo. Usa la función "Compartir por URL" para
guardar configuraciones de forma universal.
El código Tailwind generado usa clases arbitrarias de JIT Mode compatibles con Tailwind CSS v3+. Simplemente añade las clases al elemento HTML correspondiente en tu proyecto.