Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de glassmorphism CSS

CSS Glassmorphism Generator

Compone paneles de cristal esmerilado con tinte, opacidad, desenfoque y saturación ajustables, y copia el CSS con backdrop-filter y su degradación.

Ruta de la tarea / de la entrada al resultado

Elige el tinte del cristal

Funciona en local · No se sube nada

Cómo funciona Generador de glassmorphism CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo construir un panel de glassmorphism

  1. 01

    Elige el tinte del cristal

    Elige un color en Tinte del cristal. La vista previa hace flotar el panel sobre dos orbes de colores, así que el material se juzga contra un fondo con actividad, como en una pantalla real.

  2. 02

    Define opacidad y desenfoque

    Opacidad de la superficie va de 0,05 a 0,8 — más bajo significa más transparente — y Desenfoque de fondo de 0 a 40 px suaviza lo que queda detrás del panel.

  3. 03

    Ajusta saturación, borde y radio

    Saturación (50–200%) enriquece o apaga el fondo, Opacidad del borde (0–0,8) traza el filo con el color del tinte, y Radio de esquina (0–48 px) redondea el panel.

  4. 04

    Equilibra el material

    Los controles de superficie se compensan entre sí: una opacidad baja necesita más desenfoque para leerse como cristal, y una Saturación por encima del 100% evita que un fondo con actividad se lave detrás de un tinte pálido. El material predeterminado — tinte blanco con opacidad 0,22, desenfoque de 18 px y saturación del 140% — es un punto medio probado.

  5. 05

    Copia el CSS del panel

    Pulsa Copiar CSS o Descargar .css para guardar toolars-glass-panel.css. La regla .glass-panel combina un fondo rgba, backdrop-filter con su gemelo -webkit-, un borde de tinte de 1 px y una sombra suave.

  6. 06

    Planifica la degradación

    Si falta backdrop-filter, siguen visibles el fondo rgba, el borde y la sombra. Poner Desenfoque de fondo a cero solo aproxima el resultado sin filtro, ya que la saturación puede seguir activa. Prueba el CSS en los navegadores de destino y aumenta Opacidad de superficie si el texto necesita más contraste.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de glassmorphism CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de glassmorphism CSS en realidad

La barra de controles flotante de un reproductor de música, una tarjeta de notificación suspendida sobre un mapa, un panel de acceso por delante de un muro de fotos: el cristal esmerilado vende profundidad sin ocultar la página. El efecto depende por completo de lo que haya detrás, y por eso esta vista previa renderiza formas de colores sobre las que el desenfoque trabaja; toda la exploración ocurre localmente, así que la paleta de una interfaz sin lanzar nunca sale del dispositivo. Cuando el material se equilibra, la regla exportada se lleva cada decisión consigo.

Preguntas frecuentes

¿Qué CSS produce la exportación?
Una regla .glass-panel: un fondo rgba a partir de tu tinte y opacidad, backdrop-filter: blur() saturate() en sus formas estándar y -webkit-, un borde de 1 px en el tinte con tu opacidad de borde, tu radio de esquina y una sombra proyectada suave y fija.
¿Funciona el glassmorphism en todos los navegadores?
El soporte y renderizado de backdrop-filter varía según navegador y versión. La exportación incluye declaraciones estándar y -webkit-, pero no detecta la función en ejecución. Sin el filtro quedan el fondo translúcido, el borde y la sombra; comprueba el contraste del texto sobre el fondo real.
¿Por qué la vista previa necesita esos orbes de colores?
backdrop-filter procesa lo que hay detrás del elemento, así que el cristal sobre un fondo vacío no muestra nada. Los orbes dan al desenfoque y a la saturación algo real sobre lo que trabajar — la misma razón por la que los efectos de cristal necesitan fondos con actividad en producción.
¿Qué es fijo en la regla exportada?
Tres cosas: el ancho del borde es siempre 1 px, el color del borde es siempre tu tinte con la Opacidad del borde elegida, y la sombra proyectada es una extensión suave y fija. Todo lo demás — fondo, desenfoque, saturación, radio — sigue directamente tus controles.
¿Qué opacidad conviene al cristal?
Quédate en la mitad baja del rango para paneles que flotan sobre contenido: el 0,22 predeterminado mantiene los fondos legibles a través del material. Sube solo cuando el panel lleve texto que deba sobrevivir a un fondo con actividad, y comprueba el contraste a tus tamaños de fuente reales.
¿Se suben mis ajustes?
No. El panel se calcula y se previsualiza por completo en esta pestaña sin cuenta, y nada se almacena, se registra ni se envía. Pulsa Restablecer para recuperar el material predeterminado.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear