¿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.

Elysia Tools

Navegación

Design

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.

Detalles

Qué te ayuda a hacer esta herramienta

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.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

Tarjeta de cristal esmerilado de buena práctica (blur 12 / saturate 160)

Composición de buena práctica 2025: blur(12px) saturate(160%), tinte blanco 0,15, radio 16px, borde 0,25, sombra por capas con brillo superior, grano y fallback @supports, más el mapeo Tailwind con el aviso de v4.

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

Control neumórfico oscuro en estado presionado (inset)

Superficie neumórfica en modo oscuro (#2d2d2d) con sombras inset para el estado presionado y clara atenuada a 0,06 — la salida Tailwind usa valores arbitrarios de sombra.

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

Entradas

Las opciones están agrupadas para que los formularios largos sean más fáciles de revisar.

16 opciones

AjustesAjusta formatos, rangos, números y modos.11

EstiloselectOpcionalDesenfoque de fondo (px)numberOpcionalSaturación de fondo (%)numberOpcionalColor del tinte de vidriocolorOpcionalOpacidad del tintenumberOpcionalRadio de borde (px)numberOpcionalAncho del borde (px, solo vidrio)numberOpcionalOpacidad del borde (solo vidrio)numberOpcionalOpacidad de sombra externa (solo vidrio)numberOpcionalColor de fondo neucolorOpcionalDistancia de sombra neu (px)numberOpcional

InterruptoresActiva o desactiva comportamientos opcionales.5

Brillo del borde superior (inset)checkboxOpcionalActivado si está marcadoSuperposición de granocheckboxOpcionalActivado si está marcadoFallback @supportscheckboxOpcionalActivado si está marcadoEstado presionado (inset) neucheckboxOpcionalActivado si está marcadoModo oscuro neucheckboxOpcionalActivado si está marcado

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Continuar con herramientas y temas relacionados

style: glass, blurPx: 12, saturatePct: 160, tintColor: #ffffff, tintAlpha: 0.15, radiusPx: 16, borderWidth: 1, borderAlpha: 0.25, shadowAlpha: 0.12, topHighlight: true, noiseOverlay: true, includeFallback: true

Generador de snippets CSS glassmorphism / neumorfismo

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Tarjeta de cristal esmerilado de buena práctica

2. Control neumórfico oscuro en estado presionado

Preguntas frecuentes

Ejemplos SVG

Ejemplos de Tailwind CSS

Ejemplos de Procesamiento de Imágenes Web Python

Ejemplos del Framework CSS Bulma

Extractor de contorno melódico de audio

Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)

Herramienta de Marca de Agua en Esquina

Herramienta de Marca de Agua Diagonal

Herramientas de Flujo para SVG, Favicon e Iconos

Herramientas de codificacion y conversion de audio

Herramientas de conversion de formatos de imagen y exportacion animada

Herramientas de intercambio JSON y traduccion de formatos