🚀 ¡Pockit ya está en Chrome!

Deja de buscar en Google. Accede a las herramientas con un solo clic.

Añadir a Chrome (Gratis)

Privacidad 100% Garantizada

Todo el procesamiento se realiza en tu navegador. Tus datos nunca salen de este dispositivo.

Gratis
👥

Adiós a las peleas por los equipos

Equilibra por habilidad, separa rivales, une parejas. Gratis y sin registro.

🎲Crear equipos

Generador de Glassmorphism

Diseño de cristal moderno. Genera el efecto Glassmorphism (vidrio esmerilado) CSS con desenfoque y transparencia personalizables. Estilo tendencia en segundos.

Presets

10px
25%
180%
18%

Código CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);

Vista Previa

Glassmorphism

Una tendencia de diseño moderna que crea efectos transparentes y borrosos como el vidrio.

Consejo: Safari requiere -webkit-backdrop-filter, ¡que está incluido en el código generado!

Generador CSS Glassmorphism

Crea el efecto de moda 'Glassmorphism' (vidrio esmerilado) para tu UI. Ajusta desenfoque, transparencia y saturación para generar el CSS perfecto.

1¿Cuándo usar esta herramienta?

💡Diseñar sitios web de moda
💡Crear UIs de tarjetas o modales elegantes
💡Necesitar paneles transparentes sobre imágenes de fondo

2Características

  • Editor visual en tiempo real
  • Genera CSS backdrop-filter
  • Incluye prefijo de compatibilidad WebKit
  • Color de fondo personalizable

3Cómo usar

  • Ajusta los deslizadores de desenfoque y transparencia.
  • Ajusta saturación y opacidad de borde.
  • Previsualiza el efecto en la tarjeta.
  • Copia el código CSS.

Preguntas Frecuentes

Q. ¿Funciona esto en todos los navegadores?

A. La mayoría de los navegadores modernos soportan `backdrop-filter`. Incluimos `-webkit-backdrop-filter` para mejor compatibilidad con Safari.