# Generador de snippets CSS glassmorphism / neumorfismo Genera el snippet CSS completo de glassmorphism o neumorfismo de punta a punta: ajusta desenfoque, saturación, opacidad del tinte, radio, borde, sombra externa y brillo superior; opcionalmente superposición de grano SVG feTurbulence y degradación @supports; incluye automáticamente el prefijo -webkit-backdrop-filter (obligatorio antes de Safari 18) y el mapeo a clases Tailwind (con la nota de diferencias v3/v4), con vista previa en vivo de la tarjeta sobre un fondo degradado. > Página canónica: https://elysiatools.com/es/tools/glassmorphism-css-snippet-builder - **Categoría:** Design - **Palabras clave:** glassmorphism, neumorfismo, backdrop-filter, cristal esmerilado, generador css, tarjeta de cristal ## Descripción general Constantes verificadas (ago 2026): clásicas de css.glass (rgba(255,255,255,.2), blur(5px), radio 16px, sombra 0 4px 30px); composición de buena práctica 2025 (blur(12px) saturate(160%), sombra 0 8px 32px rgba(0,0,0,.12) + inset superior). backdrop-filter: 95,69% global (caniuse); Safari requiere -webkit- hasta 17.x, sin prefijo desde 18; Firefox sin prefijo desde 103. Grano: feTurbulence fractalNoise como data-URI en ::before (opacidad 0,05–0,15); @supports recurre a un fondo rgba casi sólido. Tailwind: backdrop-blur-xl=24px, backdrop-saturate-150, rounded-2xl=16px; ojo, v4 cambió blur-sm de 4px a 8px — para valores exactos usa backdrop-blur-[12px]. Neumorfismo (neumorphism.io): fondo igual al de la página, sombra oscura abajo-derecha + clara arriba-izquierda, inset = presionado, modo oscuro con clara a 0,03–0,1; sus sombras no cuentan para el contraste: no lo uses en controles interactivos. ## Entradas - **Estilo** (select) - **Desenfoque de fondo (px)** (number) - **Saturación de fondo (%)** (number) - **Color del tinte de vidrio** (color) - **Opacidad del tinte** (number) - **Radio de borde (px)** (number) - **Ancho del borde (px, solo vidrio)** (number) - **Opacidad del borde (solo vidrio)** (number) - **Opacidad de sombra externa (solo vidrio)** (number) - **Brillo del borde superior (inset)** (checkbox) - **Superposición de grano** (checkbox) - **Fallback @supports** (checkbox) - **Color de fondo neu** (color) - **Distancia de sombra neu (px)** (number) - **Estado presionado (inset) neu** (checkbox) - **Modo oscuro neu** (checkbox) ## Cuándo usarlo - Cuando diseñes tarjetas de cristal esmerilado con backdrop-filter para paneles, modales o landing pages. - Al crear superficies Soft UI (neumorfismo) elevadas o en estado presionado, en modo claro u oscuro. - Si necesitas CSS listo para copiar, clases Tailwind y compatibilidad con Safari anterior a la 18. ## Cómo funciona - Elige el estilo: glassmorphism (cristal esmerilado) o neumorfismo (Soft UI). - Ajusta desenfoque, saturación, color y opacidad del tinte, radio, borde y sombras; en neu, color de fondo, distancia, inset y modo oscuro. - Activa o desactiva brillo superior inset, grano feTurbulence y fallback @supports. - Obtén el CSS con -webkit-backdrop-filter, el mapeo Tailwind (con nota v3/v4) y la vista previa de la tarjeta. ## Casos de uso - Tarjetas de cristal esmerilado sobre fondos degradados en dashboards y páginas de marketing. - Paneles o controles neumórficos en modo claro u oscuro, elevados o con estado inset presionado. - Componentes UI reutilizables con CSS, grano, fallback y clases Tailwind listas para pegar. ## Preguntas frecuentes ### ¿Qué estilos CSS genera esta herramienta? Glassmorphism (cristal esmerilado con backdrop-filter) y neumorfismo (sombras claras y oscuras sobre el mismo color de fondo). ### ¿Incluye el prefijo para Safari? Sí. El snippet emite siempre -webkit-backdrop-filter, obligatorio en Safari hasta 17.x; desde Safari 18 y Firefox 103 no hace falta prefijo. ### ¿Qué hace la superposición de grano? Añade un ::before con SVG feTurbulence (fractalNoise) en data-URI y opacidad baja para texturizar el vidrio sin depender de imágenes externas. ### ¿Hay degradación si el navegador no soporta backdrop-filter? Sí, si activas Fallback @supports el CSS recurre a un fondo rgba casi sólido cuando no hay backdrop-filter. ### ¿Cómo se mapean las clases Tailwind? Usa utilidades como backdrop-blur-xl o rounded-2xl y valores arbitrarios cuando hace falta. Advierte el cambio de blur-sm (4px a 8px) entre Tailwind v3 y v4. ## Herramientas relacionadas - [Extractor de contorno melódico de audio](https://elysiatools.com/es/tools/audio-melody-contour-extractor): Extrae la melodía dominante y exporta MIDI, eventos de notas, contorno tonal, SVG y JSON en un ZIP. - [Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/es/tools/font-file-inspector): Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables. - [Herramienta de Marca de Agua en Esquina](https://elysiatools.com/es/tools/image-watermark-corner): Añade marcas de agua en las esquinas de las imágenes con posición, tamaño, opacidad y opciones de múltiples esquinas personalizables - [Herramienta de Marca de Agua Diagonal](https://elysiatools.com/es/tools/image-watermark-diagonal): Añade marcas de agua diagonales a imágenes con ángulo, tamaño, opacidad y posicionamiento a lo largo de la diagonal personalizables - [Herramienta de Marca de Agua con Imagen](https://elysiatools.com/es/tools/image-watermark-image): Añade marcas de agua de imagen a imágenes con posición, tamaño, opacidad y rotación personalizables - [Herramienta de Opacidad de Marca de Agua](https://elysiatools.com/es/tools/image-watermark-opacity): Añade marcas de agua con opacidad personalizada a las imágenes, soportando marcas de agua de texto e imagen con controles avanzados de opacidad - [Herramienta de Mosaico de Marca de Agua](https://elysiatools.com/es/tools/image-watermark-tile): Añade marcas de agua en mosaico a imágenes con tamaño, opacidad, espaciado y patrones personalizables - [Extractor de datos desde graficos SVG](https://elysiatools.com/es/tools/svg-chart-to-data-extractor): Extrae puntos de datos desde estructuras SVG de lineas, barras y pastel y exporta JSON o CSV ## Ejemplos - [Ejemplos SVG](https://elysiatools.com/es/samples/svg-samples): Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS ## Contenido relacionado - [Herramientas de Flujo para SVG, Favicon e Iconos](https://elysiatools.com/es/hubs/svg-favicon-icon-workflows): Genera paquetes de favicon, optimiza SVG, convierte iconos entre ICO, PNG, JPG, WebP y SVG, y prepara assets listos para la web en un solo hub. - [Herramientas de codificacion y conversion de audio](https://elysiatools.com/es/hubs/audio-convert): Compara conversion de formatos de audio, cambios de bitrate, conversion de frecuencia de muestreo, cambio de codec y exportacion en un solo hub. - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de intercambio JSON y traduccion de formatos](https://elysiatools.com/es/hubs/json-convert): Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub.