Anuncio La propiedad CSS de filtros de fondo le permite aplicar efectos visuales (como desenfoque, brillo, contraste, etc.) al área detrás de un elemento, lo que lo hace perfecto para UI de vidrio esmerilado, superposiciones suaves o diseños modernos modernos. Los requisitos previos son: compatibles con navegadores modernos como Chrome, Edge y Safari.Requires Transparencia (como RGBA o Filter de fondo en los elementos semi-transparentes). MAY NECESITA Color de fondo: RGBA (…, .5) y Backdrop-Filter para ser configurado para los efectos para mostrar adecuadamente. } .Element {Filter Filter: Blur (10px);} Filtros compatibles Ejemplo 1: Tarjeta de vidrio helado Consulte la tarjeta de vidrio esbelto de Abhishek Ghosh (@abhishekgheh-the-ender) en Codepen. Ejemplo 2: múltiples filtros combinados Vea el lápiz múltiples filtros combinados por Abhishek Ghosh (@abhishekgheh-the-ender) en CodePen. Consejos y notas siempre asegúrese de que el elemento tenga un fondo transparente para realmente «ver» el efecto de fondo. En algunas plataformas (como Safari), es posible que necesite -webkit-backdrop-filter para compatibilidad. Recuerde que aplicar un desenfoque pesado en muchos elementos puede afectar el rendimiento. En ciertas situaciones, puede usar el gradiente lineal para difuminar selectivamente algunas áreas más combinar diferentes colores. Hay herramientas gratuitas en línea para generar gradiente lineal: .div-name {fondo: gradiente lineal (86deg, RGBA (255,255,255,1) 26%, RGBA (255,255,255,0.8540208319655987) 46%, RGBA (255,255,25555555%). RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,1) 100%, RGBA (255,255,2555,1) 100%, RGBA (255,255,255,0.7643844977623862) 100%, 100%, 100%. RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,0.9100432409291842) 100%, RGBA (255,255,255,0) 100%, RGBA (255,255,255,255,1) 100%); } .div-name {fondo: gradiente lineal (86deg, RGBA (255,255,255,1) 26%, RGBA (255,255,255,0.85402083196555987) 46%, RGBA (255,255,255,1) 80%, RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,1) 100%, RGBA (255,255,2555,1) 100%, RGBA (255,255,255,0.7643844977623862) 100%, 100%, 100%. RGBA (255,255,255,0.7475782549347865) 100%, RGBA (255,255,255,0.9100432409291842) 100%, RGBA (255,255,255,0) 100%, RGBA (255,255,255,255,1) 100%); } Un ejemplo de ello es mi sitio, la barra de navegación de Abhishekgheh.com. Ya sea que esté construyendo tarjetas, modales, barras de navegación o superposiciones, es una herramienta valiosa para cualquier desarrollador frontal.