Elige filter o backdrop-filter, parte de un ajuste predefinido y modifica los controles mientras observas la vista previa. Copia las declaraciones CSS para aplicar el efecto en tu página.
Se ejecuta localmente en tu navegadorEl banco de trabajo compone una sola declaración filter a partir de ocho funciones: brillo, contraste, saturación, escala de grises, sepia, rotación de tono, desenfoque y opacidad. Elige primero la propiedad — filter se pinta sobre el propio elemento y backdrop-filter sobre lo que queda detrás — y mueve los controles viendo cómo se actualiza la vista previa.
El panel de salida contiene la declaración final: una línea filter, o las dos líneas de backdrop-filter con el prefijo -webkit- que Safari todavía necesita. Cópialas en tu propia regla. Nada sale del navegador y la página sigue funcionando sin conexión.
filter se aplica al elemento y a todo lo que pinta, incluidos hijos y texto. backdrop-filter deja el elemento intacto y filtra los píxeles que hay detrás; por eso un panel de cristal necesita un fondo parcialmente transparente para que el efecto se vea.
La compatibilidad no es idéntica: Safari sigue requiriendo el prefijo -webkit-backdrop-filter, y el panel de exportación escribe ambas líneas por ese motivo. Cuando un motor no admite la propiedad, ignora la declaración y el elemento se dibuja con normalidad, así que trata el cristal como decoración y no como estructura.
Cada control corresponde a una función CSS: brillo, contraste y saturación llevan porcentajes en torno al 100% neutro; escala de grises, sepia y opacidad van de 0 a 100%; la rotación de tono admite grados de -360 a 360; el desenfoque, píxeles en pasos de 0.5. Se escriben en un orden fijo y se aplican en ese orden, por lo que hue-rotate(-8deg) antes de blur(14px) no siempre coincide con el orden inverso.
Las funciones que permanecen en su valor neutro se omiten en la salida. Aun así, la cadena es una única declaración: cada función transforma el resultado de la anterior, no los píxeles originales.
Cada campo se limita a su rango antes de escribir el CSS: brillo y contraste de 0 a 300, saturación de 0 a 500, escala de grises, sepia y opacidad de 0 a 100, rotación de tono de -360 a 360 y desenfoque de 0 a 40 en pasos de 0.5. Si escribes -5 en el desenfoque o 500 en la escala de grises, al salir del campo vuelve a 0 y 100; un campo vacío recupera el valor que tenía. Así la declaración exportada siempre es válida: el navegador descarta el filtro completo cuando una función lleva un valor que no puede interpretar.
filter y backdrop-filter se componen en la GPU y el desenfoque es la función cara: un backdrop blur de 14px sobre una superficie grande puede costar más que todo lo demás junto, sobre todo al desplazarse. Mantén pequeña la superficie desenfocada y pruébala en el dispositivo más lento que admitas.