Generador de glassmorphism
Diseña una superficie translúcida y copia CSS o clases Tailwind.
Ajusta los controles para una capa legible y tranquila.
Bloque CSS
.glass {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 20px;
box-shadow: 0 15px 50px rgba(15, 23, 42, 0.125);
}Clases Tailwind
bg-white/65 backdrop-blur-[16px] backdrop-saturate-[140%] border border-white/35 rounded-[20px] shadow-[0_15px_50px_rgba(15,23,42,0.125)]
Cómo usarlo
- Ajusta los seis controles visuales.
- Compara la superficie sobre distintos degradados.
- Copia el CSS o las clases Tailwind.
Acerca de esta herramienta
El glassmorphism es un estilo de interfaz por capas que combina translucidez, desenfoque, saturación, bordes claros, esquinas redondeadas y una sombra suave. El resultado depende de la relación entre la superficie y el fondo, no de un único valor rgba. Este generador expone los controles principales y muestra la tarjeta sobre varios degradados coloridos. El desenfoque separa el contenido del fondo complejo, la transparencia deja influir a la imagen, la saturación conserva o intensifica el color, la opacidad del borde define el contorno, el radio marca la silueta y la sombra aporta profundidad. El CSS incluye backdrop-filter y su variante de WebKit para una cobertura más amplia. La cadena de utilidades Tailwind es un punto de partida, pero comprueba los valores arbitrarios y la sintaxis de opacidad con la versión de Tailwind de tu proyecto. Prueba el contraste de las superficies claras y oscuras, y asegúrate de que el texto siga siendo legible cuando cambie el fondo. Los filtros son una mejora progresiva, así que ofrece un fallback translúcido adecuado. Muchas capas muy transparentes pueden generar ruido y composiciones costosas. Copia el código y ajusta después espaciado, color, estados de foco y preferencias de movimiento reducido en el componente que lo use. El generador funciona localmente y no guarda la configuración.
Preguntas frecuentes
Herramientas relacionadas
Calculadora de relación de aspecto
Calcula dimensiones proporcionales para 16:9, 4:3, cuadrado, vertical, cine y relaciones personalizadas.
Previsualizador Open Graph
Previsualiza tarjetas de Twitter, Discord, Telegram y LinkedIn y genera etiquetas Open Graph.
Generador de placeholders
Crea placeholders SVG y URI de datos con dimensiones, colores, etiquetas y fuente personalizadas.