Atributo filter de CSS

Definición y uso

El atributo filter define los efectos visuales del elemento (generalmente <img>) (como el desenfoque y la saturación).

Vé también:

Tutoriales CSS:Imágenes CSS

Manual de referencia del DOM HTML:Atributo filter

Ejemplo

Convertir todas las imágenes en blanco y negro (100% gris):

img {
  filter: escala_gris(100%);
}

Prueba por ti mismo

Consejo:Puedes encontrar más ejemplos de TIY en la parte inferior de la página.

Sintaxis de CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Consejo:Para usar varios filtros, separe cada filtro con un espacio (vea más ejemplos en la parte inferior de la página).

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Soportado. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.filter="grayscale(100%)"

Función de filtro

Notas:Usa valores porcentuales en porcentaje (por ejemplo, 75%) los filtros, también aceptan que el valor sea decimal (por ejemplo, 0.75).

Filtro Descripción
none Predeterminado. Especifica sin efecto.
blur(px)

Aplica un efecto de borrosidad a la imagen. Un valor mayor produce más borrosidad.

Si se especifica un valor, se usa 0.
brightness(%)

Ajusta la luminosidad de la imagen.

  • 0% haría que la imagen se volviera completamente oscura.
  • El valor predeterminado es 100%, representando la imagen original.
  • Valores superiores al 100% proporcionarán un resultado más brillante.
contrast(%)

Ajusta la contraste de la imagen.

  • 0% haría que la imagen se volviera completamente oscura.
  • El valor predeterminado es 100%, representando la imagen original.
  • Valores superiores al 100% proporcionarán un resultado más contrastante.
drop-shadow(h-shadow v-shadow blur spread color)

Aplica un efecto de sombra a la imagen.

Valores posibles:

  • h-shadow - obligatorio. Especifica el valor en píxeles de la sombra horizontal. Un valor negativo colocará la sombra a la izquierda de la imagen.
  • v-shadow - obligatorio. Especifica el valor en píxeles de la sombra vertical.

blur - opcional. Este es el tercer valor, la unidad debe ser píxeles. Añade un efecto de borrosidad a la sombra. Un valor mayor crea una borrosidad mayor (la sombra se vuelve más grande y más brillante). No se permiten valores negativos. Si no se especifica un valor, se usará 0 (los bordes de la sombra serán muy agudos).

spread - opcional. Este es el cuarto valor, la unidad debe ser píxeles. Un valor positivo causará que la sombra se expanda y aumente, mientras que un valor negativo causará que la sombra se reduzca. Si no se especifica un valor, se usará 0 (la sombra tendrá el mismo tamaño que el elemento).

Notas:Chrome, Safari y Opera, tal vez también otros navegadores, no admiten la cuarta longitud; si se añade, no se mostrará.

color - opcional. Añade color a la sombra. Si no se especifica, el color depende del navegador (generalmente negro).

Este ejemplo crea una sombra roja, horizontal y verticalmente 8px, con un efecto de borrosidad de 10px:

filter: sombra(8px 8px 10px rojo);

Consejo:Este filtro es similar a la propiedad box-shadow.
grayscale(%)

Convertir la imagen en escala de grises.

  • 0% (0) es el valor predeterminado, representa la imagen original.
  • 100％ convertirá completamente la imagen en gris (usado para imágenes en blanco y negro).

Notas:No se permiten valores negativos.
hue-rotate(deg)

Aplicar rotación de fase en la imagen. Este valor define los grados del anillo de color. El valor predeterminado es 0deg, representa la imagen original.

Notas:El valor máximo es 360deg.
invert(%)

Invertir los ejemplos en la imagen.

  • 0% (0) es el valor predeterminado, representa la imagen original.
  • 100％ invertirá completamente la imagen.

Notas:No se permiten valores negativos.
opacity(%)

Establecer el nivel de opacidad de la imagen. El nivel de opacidad opacity-level describe el nivel de transparencia, donde:

  • 0% es completamente transparente.
  • 100% (1) es el valor predeterminado, representa la imagen original (opaca).

Notas:No se permiten valores negativos.

Consejo:Este filtro es similar a la propiedad opacity.
saturar(%)

Establecer la saturación de la imagen.

  • 0% (0) hará que la imagen sea completamente desaturada.
  • 100% es el valor predeterminado y representa la imagen original.
  • Valores superiores al 100% proporcionan resultados super-saturados.

Notas:No se permiten valores negativos.
sepia(%)

Convertir la imagen en sepia.

  • 0% (0) es el valor predeterminado, representa la imagen original.
  • 100％ convertirá la imagen completamente en sepia.

Notas:No se permiten valores negativos.
url()

La función url() acepta la ubicación del archivo XML de filtro SVG y puede incluir un ancla hacia un elemento de filtro específico. Ejemplo:

filter: url(svg-url#element-id)
initial Establecer este atributo en su valor predeterminado. Ver initial.
inherit Heredar esta propiedad del elemento padre. Ver inherit.

Más ejemplos

Ejemplo borroso

Añadir efecto borroso a la imagen:

img {
  filter: desenfocar(5px);
}

Prueba por ti mismo

Ejemplo borroso 2

Aplicar imagen de fondo borrosa:

img.background {
  filter: desenfocar(35px);
}

Prueba por ti mismo

Ejemplo de brillo

Ajustar el brillo de la imagen:

img {
  filter: brillo(200%);
}

Prueba por ti mismo

Ejemplo de contraste

Ajustar el contraste de la imagen:

img {
  filter: contraste(200%);
}

Prueba por ti mismo

Ejemplo de sombra

Aplicar efecto de sombra a la imagen:

img {
  filter: sombra(8px 8px 10px gris);
}

Prueba por ti mismo

Ejemplo de escala de grises

Convertir la imagen en escala de grises:

img {
  filter: escala_gris(50%);
}

Prueba por ti mismo

Ejemplo de giro de tono

Aplicar un giro de tono en la imagen:

img {
  filter: rotar_tono(90deg);
}

Prueba por ti mismo

Ejemplo de inversión

Invertir los ejemplos en la imagen:

img {
  filter: invertir(100%);
}

Prueba por ti mismo

Ejemplo de opacidad

Establecer el nivel de opacidad de la imagen:

img {
  filter: opacidad(30%);
}

Prueba por ti mismo

Ejemplo de saturación

Ajustar la saturación de la imagen:

img {
  filter: saturar(800%);
}

Prueba por ti mismo

Ejemplo de sepia

Convertir la imagen en sepia:

img {
  filter: sepia(100%);
}

Prueba por ti mismo

Uso de múltiples filtros

Para usar múltiples filtros, separe cada filtro con espacios. Tenga en cuenta que el orden es importante (por ejemplo, usar grayscale() después de sepia() producirá una imagen completamente gris):

img {
  filter: contraste(200%) brillo(150%);
}

Prueba por ti mismo

Todos los filtros

Demostrar todas las funciones de filtro:

.desenfocar {
  filter: desenfocar(4px);
}
.brillo {
  filter: brillo(0.30);
}
.contraste {
  filter: contraste(180%);
}
.escala_gris {
  filter: escala_gris(100%);
}
.rotar_tono {
  filter: rotar_tono(180deg);
}
.invertir {
  filter: invertir(100%);
}
.opacidad {
  filter: opacidad(50%);
}
.saturar {
  filter: saturar(7);
}
.sepia {
  filter: sepia(100%);
}
.sombra {
  filter: sombra(8px 8px 10px verde);
}

Prueba por ti mismo

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit- indican la primera versión que utiliza el prefijo.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Notas:Las versiones más antiguas de Internet Explorer (desde 4.0 hasta 8.0) admiten el atributo no estándar "filter" obsoleto. Cuando se necesita soporte para IE8 y versiones anteriores, se utiliza principalmente para la opacidad.