El CSS filter la propiedad parece un atajo de estilo: una línea convierte una foto en blanco y negro, difumina un fondo o calienta una miniatura, sin ningún editor de imágenes involucrado. Es eso. También cambia la forma en que el navegador posiciona y superpone el elemento al que se aplica, razón por la cual un filtro agregado para un efecto flotante puede separar silenciosamente un menú desplegable a tres componentes.
Esta guía cubre lo que cada función de filtro hace con los valores de píxeles, por qué las mismas funciones en un orden diferente producen una imagen diferente, cómo se comportan los filtros en diseño y animación, y dónde cuestan rendimiento. Utiliza el gratis Generador de filtros CSS para crear las declaraciones, pero cada ejemplo es CSS simple que puedes pegar en cualquier lugar.
TL;Dr: El CSS
filterla propiedad aplica efectos gráficos como desenfoque, brillo, contraste, escala de grises, sepia, saturar, invertir, girar el tono y opacidad a un elemento y todo lo que contiene, en el orden en que están escritas las funciones. Cualquier valor distinto denonetambién crea un contexto de apilamiento y se convierte en el bloque contenedor para niños fijos y absolutamente posicionados, que es la causa habitual de " mi modal está atrapado dentro de una tarjeta" El generador de filtros CSS de Toolz crea la declaración con controles deslizantes y una vista previa en vivo, escribe solo las funciones que cambió y ejecuta el lado del cliente, gratis, sin registro.
¿Qué es la propiedad del filtro CSS?
La propiedad de filtro CSS aplica efectos de procesamiento de imágenes a un elemento antes de dibujarlo en la página. El efecto cubre la representación completa del elemento 's: su fondo, bordes, texto, imágenes y elementos secundarios. Está definido en el W3C Módulo de Efectos de Filtro Nivel 1 y compatible con todos los navegadores actuales; el Referencia MDN para filtro enumera detalles de compatibilidad.
Una declaración es una lista de funciones de filtro separadas por espacios:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Las funciones se ejecutan de izquierda a derecha. Cada uno toma como entrada la salida del anterior, que es la clave para entender por qué es importante el orden.
Los filtros no modifican el archivo de imagen. El navegador los aplica cada vez que pinta, por lo que el original permanece intacto y puedes cambiar o eliminar el efecto con una línea de CSS.
¿Qué hace cada función de filtro?
Cada función tiene un valor de identidad que deja el elemento sin cambios. El generador Toolz lo utiliza para mantener la salida corta: cualquier función que quede en su valor de identidad se omite del CSS.
| Función | Lo que hace | Identidad | Gama de control deslizante del generador |
|---|---|---|---|
blur() |
Desenfoque gaussiano con el radio dado | 0px |
0 a 20px |
brightness() |
Multiplica cada canal de color | 100% |
0 până la 200% |
contrast() |
Empuja los canales lejos o hacia el gris medio | 100% |
0 până la 200% |
saturate() |
Aumenta o disminuye la intensidad del color | 100% |
0 până la 200% |
grayscale() |
Se mezcla con un gris de igual luminancia | 0% |
0 până la 100% |
sepia() |
Se mezcla con un tono marrón cálido | 0% |
0 până la 100% |
invert() |
Gira cada canal hacia su opuesto | 0% |
0 până la 100% |
hue-rotate() |
Gira los colores alrededor de la rueda de colores | 0deg |
0 a 360 deg |
opacity() |
Hace que el elemento sea más transparente | 100% |
0 până la 100% |
La especificación permite valores más allá de algunos de estos rangos, como por ejemplo brightness(300%). Los controles deslizantes cubren los rangos que son útiles para realizar ajustes de estilo fotográfico; puede escribir un valor mayor en su CSS a mano.
La especificación también define drop-shadow(), que el generador no incluye. A diferencia box-shadow, drop-shadow() sigue la forma visible de imágenes transparentes como los íconos PNG, en lugar del cuadro rectangular de element's. Para sombras rectangulares, el guía de sombras de caja cubre la propiedad más flexible.
¿Cómo cambian los filtros de color los valores de píxeles?
La mayoría de los filtros de color son aritméticos simples en los canales rojo, verde y azul, cada uno tratado como un número de 0 a 1. La especificación de efectos de filtro define cada uno como una fórmula o una matriz de 3 por 3. Trabajados en algunos colores, se vuelven predecibles.
brillo (150%) multiplica cada canal por 1,5. Un gris medio de rgb(100, 100, 100) se convierte en rgb(150, 150, 150). Los valores que superarían los 255 se recortan, razón por la cual el alto brillo elimina las luces a blanco puro.
contraste(200%) aplica (valor - 0,5) × 2 + 0,5 a cada canal. Un gris oscuro a 0,25 (aproximadamente 64) se convierte en (0,25 - 0,5) × 2 + 0,5 = 0, negro. Un gris claro a 0,75 se convierte en 1,0, blanco. Todo se extiende desde el centro.
escala de grises (100%) reemplaza cada píxel con un gris según la luminancia, usando pesos de 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. Rojo puro, rgb(255, 0, 0), se convierte en 0,2126 × 255 = aproximadamente 54, por lo que rgb(54, 54, 54). El verde puro se convierte en un gris mucho más claro de aproximadamente 182. Es por eso que una conversión en escala de grises mantiene la sensación de que el verde es más brillante que el rojo.
sepia(100%) mezcla canales con coeficientes ponderados en caliente. Para salida roja la fórmula es 0,393R + 0,769G + 0,189B. El blanco entra como (1, 1, 1) y sale aproximadamente como (1,35, 1,20, 0,94), que se engancha a rgb(255, 255, 239): el blanco se convierte en una crema tenue.
Estas cifras provienen de la aplicación directa de las fórmulas de especificación 's. En la pantalla, el redondeo y la gestión del color pueden mover un resultado una o dos unidades.
¿Por qué el orden de las funciones del filtro cambia el resultado?
Los filtros se aplican en secuencia, por lo que cada función funciona en la salida anterior de la función 's. Cuando una función elimina información, como la eliminación de color en escala de grises, cualquier cosa que se ejecute después tiene menos con qué trabajar.
Tome azul puro, rgb(0, 0, 255) y aplique escala de grises y sepia al 100% en ambos órdenes.
filter: grayscale(100%) sepia(100%);
- Primero escala de grises: el azul tiene una luminancia de 0,0722, por lo que el píxel se vuelve gris oscuro de 0,0722 en cada canal, aproximadamente rgb(18, 18, 18).
- Sepia segundo: el rojo se convierte en 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, el verde se convierte en 0,0722 × 1,203 = 0,0869, el azul se convierte en 0,0722 × 0,937 = 0,0677.
- Resultado: acerca de rgb(25, 22, 17), un marrón cálido muy oscuro.
filter: sepia(100%) grayscale(100%);
- Sepia primero: el rojo se vuelve 0,189, el verde 0,168, el azul 0,131 y el marrón oscuro.
- Segundo en escala de grises: la luminancia es 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Resultado: acerca de rgb(43, 43, 43), un gris neutro sin ningún tinte.
Las mismas dos funciones, de diferente orden, y un resultado se tonifica mientras que el otro no. La regla general: coloque primero las funciones de eliminación de color si desea que una función posterior tiñe el resultado y, por último, si desea una imagen final neutral.
El generador siempre escribe funciones en un orden fijo: desenfoque, brillo, contraste, saturación, escala de grises, sepia, inversión, tono-rotar, opacidad. Entonces la escala de grises siempre viene antes que la sepia, que proporciona la versión tonificada. Si necesita un orden diferente, copie el CSS y reorganice las funciones a mano.
¿qué producen los ajustes preestablecidos?
El generador se abre en el preajuste Vintage. Estas son las declaraciones exactas que escribe cada preajuste:
| Preestablecido | Css generado |
|---|---|
| nadie | filter: none; |
| Escala de grises | filter: grayscale(100%); |
| Vintage | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Cálido | filter: brightness(105%) saturate(140%) sepia(25%); |
| Fresco | filter: saturate(120%) hue-rotate(200deg); |
| Dramático | filter: brightness(90%) contrast(150%) saturate(120%); |
| Desvanecido | filter: brightness(110%) saturate(80%) opacity(80%); |
| Invertir | filter: invert(100%); |
| Desenfocar | filter: blur(4px); |
Los ajustes preestablecidos son puntos de partida. Haga clic en Calentar, luego arrastre el desenfoque a 2px y la salida se convertirá filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Haga clic en Ninguno o Restablecer y volverá a filter: none;.
El ajuste preestablecido Cool es más fuerte de lo que sugiere su nombre: una rotación de tono de 200 grados mueve los naranjas hacia el azul y los azules hacia el naranja. Se lee como "cool" en fotos cálidas y como un fuerte cambio de color en todo lo demás.
La vista previa es una muestra fija de un degradado azul, naranja y verde con algunas formas, no una carga. Muestra cómo cada función mueve el color, el contraste y el desenfoque, pero siempre prueba el CSS copiado en tu imagen real, porque un filtro que favorece un degradado puede verse turbio en un tono de piel.
¿Cómo se construye un filtro con el generador?
- Abre el filtro generador CSS. Comienza en Vintage.
- Elija un ajuste preestablecido más cercano al aspecto que desee o haga clic en Ninguno para comenzar sin filtros.
- Arrastre los controles deslizantes. La vista previa se actualiza a medida que se mueve y la línea CSS generada se actualiza con ella.
- Haga clic en Copiar CSS para poner el completo
filter: ...;declaración en tu portapapeles. - Péguelo en el selector de su imagen o elemento y luego compruébelo en la página real.
Solo aparecen funciones modificadas en la salida, por lo que se elimina el brillo al 100% brightness() desde la línea en lugar de salir brightness(100%) detrás.
¿Por qué un filtro rompe elementos fijos y absolutamente posicionados?
Porque cualquiera filter distinto de none convierte el elemento en un bloque contenedor para sus descendientes posicionados absoluta y fijo, y crea un nuevo contexto de apilamiento. La especificación de efectos de filtro establece ambos. Esto no es un error del navegador; así es como se define la propiedad.
En la práctica, eso produce dos errores clásicos.
Un modal fijo que no es fijo. Normalmente position: fixed coloca un elemento relativo a la ventana gráfica. Dentro de un ancestro filtrado se coloca en relación con ese ancestro:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Un menú desplegable oculto debajo de los vecinos. El elemento filtrado se convierte en su propio contexto de apilamiento, por lo que es un niño con z-index: 1000 ya no puede elevarse por encima de elementos fuera de la tarjeta. Sólo está encima dentro de la tarjeta.
Las correcciones son las mismas para ambos. Aplique el filtro a un elemento más estrecho, como el img dentro de la tarjeta en lugar de la tarjeta misma. O renderizar el modal o desplegable fuera del elemento filtrado, que es lo que hacen "portal" componentes en marcos de interfaz de usuario. El transform la propiedad causa el mismo comportamiento de bloque contenedor, por lo que Guía de transformación CSS es útil si encuentra este error con ambas propiedades en juego.
¿cómo se comparan los filtros con el filtro de fondo y la opacidad?
Varias propiedades se superponen con las funciones del filtro y elegir la correcta evita efectos secundarios.
| Propiedad | Afecta | Uso Típico |
|---|---|---|
filter |
El elemento y su contenido | Efectos fotográficos, logotipos en escala de grises, desenfoque en una imagen |
backdrop-filter |
Lo que sea que esté detrás del elemento | Paneles de vidrio esmerilado, superposiciones borrosas |
opacity |
El elemento y su contenido | Desvanecer un elemento hacia adentro o hacia afuera |
filter: opacity() |
El elemento y su contenido | Transparencia como parte de una cadena de filtros |
mix-blend-mode |
Cómo se mezcla el elemento con lo que hay detrás | Superposiciones de color, efectos duotonos |
backdrop-filter toma las mismas funciones que filter, pero los aplica al contenido detrás del elemento, que es como los paneles de morfismo de vidrio desdibujan la página debajo. El generador de morfismo de vidrio construye esas declaraciones.
Para desvanecer un elemento por sí solo, simple opacity es la elección más clara. opacity() dentro de una cadena de filtros es útil cuando ya estás escribiendo un filtro y quieres transparencia en la misma línea.
¿puedes animar filtros CSS?
Sí. filter es animable y un patrón común es un logotipo en escala de grises que se vuelve color al flotar:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
El navegador interpola entre grayscale(100%) y none porque none se trata como funciones coincidentes en sus valores de identidad. La interpolación funciona limpiamente cuando ambos estados enumeran las mismas funciones en el mismo orden. Si las listas inicial y final difieren en orden, el resultado puede saltar en lugar de animarse sin problemas, así que escriba ambos estados con el mismo orden de funciones.
¿los filtros CSS perjudican el rendimiento?
Los filtros cuestan tiempo de renderizado y el desenfoque es el que más cuesta. Los navegadores suelen ejecutar filtros en la GPU, lo que hace que la mayoría de los filtros de color sean baratos. blur() es diferente: el trabajo crece tanto con el radio de desenfoque como con el tamaño del área, por lo que un radio grande en un elemento de pantalla completa, especialmente uno que anima o se sienta detrás del contenido de desplazamiento, puede soltar fotogramas en dispositivos más lentos.
Limite practice:
- Mantenga los radios borrosos pequeños en elementos grandes y evite animar el radio en sí.
- Desenfoque un elemento más pequeño o una imagen reducida en lugar de un contenedor de página completa.
- Para el movimiento, anima
transformyopacity, que los navegadores manejan eficientemente y mantienen el filtro estático. - Pruebe en un teléfono de gama media, no solo en un escritorio.
Preguntas comunes sobre efectos específicos
Algunos efectos aparecen con suficiente frecuencia como para escribirlos.
Imagen en blanco y negro: filter: grayscale(100%); Los valores inferiores al 100% dejan algo de color, así que grayscale(50%) da una mirada apagada.
Imagen de fondo atenuada detrás del texto: filter: brightness(60%); en el elemento de imagen. Verifique el contraste del texto después en lugar de adivinar; el comprobador de contraste de color da una relación WCAG.
Modo oscuro aproximado para un documento o diagrama incrustado: filter: invert(100%) hue-rotate(180deg); La inversión voltea la luz y la oscuridad, pero también convierte los tonos en opuestos; rotar el tono 180 grados devuelve la mayoría de los colores a su tono original. Es una aproximación y las fotos del interior se verán mal, así que excluyéndolas.
Tonificat alb negru: filter: grayscale(100%) sepia(60%); como se trabajó anteriormente.
El conjunto completo de compiladores CSS, incluidas las transformaciones y sombras de texto, está en el Centro de herramientas CSS.
¿El generador es privado?
Sí. La vista previa y el CSS se generan en su navegador con JavaScript. No se carga nada, no hay imagen que cargar en primer lugar y la herramienta sigue funcionando sin conexión una vez que se ha cargado la página. Copiar el CSS cuenta para un límite de uso diario y registra solo que se realizó una copia.
