Pockit

🚀 ¡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.

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.

Herramientas Recomendadas

Probar ahora

Radio de Borde CSS
Suaviza tu interfaz. Crea formas orgánicas y bordes redondeados avanzados con control total. Genera CSS moderno para botones y tarjetas.
Try it
Generador de Sombra de Caja
Sombras perfectas. Crea efectos de `box-shadow` CSS visualmente y copia el código optimizado. Añade profundidad y estilo a tus elementos web.
Try it
Vista Previa HTML
Escribe y previsualiza HTML, CSS y JavaScript en tiempo real. Prueba tu código al instante en un sandbox seguro.
Try it