Generador de glassmorphism
Crea CSS con efecto de cristal esmerilado (frosted glass) mediante desenfoque, transparencia y borde, con vista previa y copia
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Con deslizadores de desenfoque (blur), transparencia del fondo, saturación y borde, creas la interfaz de aspecto de cristal translúcido (glassmorphism) tan de moda. Ajustas los valores mientras observas una vista previa en tiempo real sobre un fondo de color y copias el CSS listo para pegar.
Cómo usar
- Mueve los deslizadores de desenfoque, transparencia del fondo, saturación, redondeo y borde hasta lograr la textura de cristal deseada.
- Ajusta el color del cristal y el color de fondo de la vista previa con el selector de color.
- Comprueba en la vista previa sobre fondo de color si el efecto de cristal se ve bien.
- Lleva el CSS terminado con «Copiar CSS» y pégalo en el elemento que quieras.
Preguntas frecuentes
- No se aplica backdrop-filter.
- El efecto de desenfoque de backdrop-filter solo se ve cuando hay un fondo (otro color o una imagen) «detrás» del elemento. Sobre una pantalla blanca sin fondo apenas se aprecia cambio. Para compatibilidad con Safari se incluye también -webkit-backdrop-filter.
- ¿Se copia también el fondo morado de la vista previa?
- No. El color de fondo es solo para la vista previa, para ayudar a ver el efecto de cristal; el CSS que se copia incluye únicamente el estilo del elemento de cristal.
- ¿Se ve igual en todos los navegadores?
- Funciona bien en las versiones recientes de Chrome, Edge, Safari y Firefox, pero la compatibilidad y el renderizado de backdrop-filter pueden variar algo según el navegador y el dispositivo, así que compruébalo antes de aplicarlo. Todos los cálculos se procesan solo en el navegador, sin envío a ningún servidor.