Generador de CSS Glassmorphism
Crea efectos de UI de vidrio esmerilado con vista previa en vivo y salida CSS. Ajusta la transparencia, desenfoque, borde y sombra.
Vista previa
Glassmorphism
Vista previa
Controles
Código CSS
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;Cómo usar
Ajustar parámetros
Ajusta opacidad, desenfoque y borde
Vista previa
Visualiza el efecto de vidrio en tiempo real
Copiar
Copia el código CSS para usar
Características
Control de desenfoque
Ajusta la cantidad de desenfoque de backdrop-filter
Personalización de fondo
Personaliza la imagen o color de fondo
Borde y sombra
Configura el borde y sombra estilo vidrio
FAQ
🔗Herramientas relacionadas
Convertidor de códigos de color
Convierte entre códigos de color HEX, RGB y HSL. Usa el selector de color y la vista previa en tiempo real para una selección intuitiva.
Selector de color
Selecciona colores de forma intuitiva usando una rueda de color y deslizadores. Obtén y copia códigos de color en formatos HEX, RGB y HSL.
Extractor de Colores de Imagen
Detecta automáticamente los colores dominantes de una imagen y genera una paleta de colores. También puedes hacer clic en cualquier parte de la imagen para seleccionar colores individuales.
Selector de Color Promedio de Imagen
Calcula el color promedio de una imagen completa o de un área seleccionada. Útil para elegir esquemas de color o colores de fondo de miniaturas.
Generador de degradados CSS
Crea degradados CSS visualmente con controles de arrastre. Admite tipos de degradado lineal, radial y cónico con preajustes.
Generador de CSS Box Shadow
Crea CSS box-shadow visualmente con deslizadores. Admite múltiples sombras y sombras interiores.