filter

La propiedad filter de CSS aplica efectos gráficos como desenfoque o cambio de color a un elemento. Los filtros se usan comúnmente para ajustar la representación de imágenes, fondos y bordes.

Varias funciones, como blur() y contrast(), están disponibles para ayudarte a lograr efectos predefinidos.

Pruébalo

Sintaxis

css
/* Valores de <filter-function> */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiples filtros */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Sin filtros */
filter: none;

/* Valores globales */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Con una función, usa lo siguiente:

css
filter: <filter-function> [<filter-function>]* | none;

Puedes usar url() para hacer referencia a un elemento de filtro SVG (en-US). Para una referencia a un elemento <filter> (en-US) de SVG, usa la siguiente sintaxis:

css
filter: url(file.svg#filter-element-id);

Funciones

La propiedad filter se especifica como none o una o más de las funciones enumeradas a continuación. Si el parámetro de alguna función no es válido, la función devuelve none. Excepto donde se indique, las funciones que toman un valor expresado con un signo de porcentaje (como en 34%) también aceptan el valor expresado como decimal (como en 0.34).

Cuando los valores de la propiedad filter contienen múltiples funciones, los filtros se aplican en orden.

blur()

Aplica un desenfoque gaussiano a la imagen de entrada.

css
filter: blur(5px);
brightness()

Aplica un multiplicador lineal a la imagen de entrada, haciéndola parecer más o menos brillante. Los valores son multiplicadores lineales del efecto, con 0% creando una imagen completamente negra, 100% no tiene ningún efecto y los valores superiores a 100% iluminan la imagen.

css
filter: brightness(2);
contrast() (en-US)

Ajusta el contraste de la imagen de entrada. Un valor de 0% hace que la imagen sea gris, 100% no tiene ningún efecto y los valores superiores a 100% crean un contraste.

css
filter: contrast(200%);
drop-shadow() (en-US)

Aplica el parámetro <shadow> como una sombra, siguiendo los contornos de la imagen. La sintaxis es similar a <box-shadow> (definida en el módulo fondo y bordes CSS), con la excepción de que la palabra clave inset y el parámetro spread no están permitidos. Al igual que con todos los valores de la propiedad filter, cualquier filtro después de drop-shadow() se aplica a la sombra.

css
filter: drop-shadow(16px 16px 10px black);
grayscale() (en-US)

Convierte la imagen a escala de grises. Un valor de 100% es completamente en escala de grises. El valor inicial de 0% deja la entrada sin cambios. Los valores entre 0% y 100% producen multiplicadores lineales del efecto.

css
filter: grayscale(100%);
hue-rotate() (en-US)

Aplica una rotación de tono. El valor <angle> define el número de grados alrededor del círculo de color de tono en el que se ajustarán las muestras de entrada. Un valor de 0deg deja la entrada sin cambios.

css
filter: hue-rotate(90deg);
invert() (en-US)

Invierte las muestras en la imagen de entrada. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja la entrada sin cambios. Los valores entre 0% y 100% tienen multiplicadores lineales en el efecto.

css
filter: invert(100%);
opacity() (en-US)

Aplica transparencia. 0% hace que la imagen sea completamente transparente y 100% deja la imagen sin cambios.

css
filter: opacity(50%);
saturate() (en-US)

Satura la imagen, con 0% siendo completamente insaturado, 100% dejando la imagen sin cambios, y valores de más de 100% aumentando la saturación.

css
filter: saturate(200%);
sepia() (en-US)

Convierte la imagen a sepia, con un valor de 100% haciendo que la imagen sea completamente sepia y 0% sin hacer cambios.

css
filter: sepia(100%);

Combinar funciones

Puede combinar cualquier cantidad de funciones para manipular la representación. Los filtros se aplican en el orden declarado. El siguiente ejemplo mejora el contraste y el brillo de la imagen:

css
filter: contrast(175%) brightness(103%);

Interpolación

Cuando está animado, si tanto el filtro inicial como el final tienen una lista de funciones de la misma longitud sin url() en el mismo orden, cada una de sus funciones de filtro es interpolada (en-US) según las reglas específicas de la función de filtro.

Si las listas de filtros tienen diferentes longitudes, las funciones de filtro equivalentes que faltan de la lista más larga se agregan al final de la lista más corta. Las funciones añadidas utilizan sus valores iniciales, sin modificación de filtro. Todos los filtros enumerados se interpolan de acuerdo con las reglas específicas de la función de filtro. De lo contrario, se utiliza la interpolación discreta.

Definicion formal

Valor inicialnone
Applies toall elements; In SVG, it applies to container elements excluding the defs (en-US) element and all graphics elements
Heredableno
Valor calculadocomo se especifica
Animation typea filter function list

Sintaxis formal

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<url> = 
  <url()>  |
  <src()>  

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )  

<url()> = 
  url( <string> (en-US) <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> (en-US) <url-modifier>* )

Ejemplos

Aplicar funciones de filtro

La propiedad filter se aplica a la segunda imagen, atenuando y difuminando tanto la imagen como su borde.

css
img {
  border: 5px solid yellow;
}
/* Ponga gris la segunda imagen en un 40% y desenfoque en 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="La imagen original es nítida" />
<img
  src="pencil.jpg"
  alt="La imagen y el borde están borrosos y silenciados." />

Repetir funciones de filtro

Las funciones de filtro se aplican en orden de aparición. Se puede repetir la misma función de filtro.

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}

Los filtros se aplican en orden. Esta es la razón por la cual las sombras paralelas no son del mismo color: el tono de la primera sombra paralela se altera con la función hue-rotate() pero la segunda no.

Especificaciones

Specification
Filter Effects Module Level 1
# FilterProperty

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también