--- title: filter slug: Web/CSS/filter tags: - CSS - Filtro - Filtro SVG - Propiedad CSS - Referencia - SVG translation_of: Web/CSS/filter ---

{{SeeCompatTable}}{{CSSRef}}

Resumen

La propiedad CSS filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.

Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL  a un filtro de un elemento SVG.

Nota: Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad "filter" no incluida en el estándar que ha quedado en desuso.

{{cssinfo}}

Sintaxis

filter: url("filters.svg#filter-id");
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%);

/* Apply multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

Con una función, use el siguiente código:

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

Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:

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

Interpolación

Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("<url>")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.

Sintaxis formal

{{csssyntax}}

Ejemplos

Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.

.mydiv { filter: grayscale(50%) }

/* funcion del blanco y negro "grayscale" al 50% y un desenfoque "blur" de 10px */
img {
  filter: grayscale(0.5) blur(10px);
}

Ejemplos del uso de la función  con el recurso SVG se muestran a continuación.

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

Funciones

Para utilizar la propiedad CSS filter, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones que toman un valor en procentaje (como en el 34%) también aceptan el valor expresado como decimal (como en 0.34 ó .34).

url()

La función url() toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.

filter: url(resources.svg#c1)

blur()

Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es 0. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.

filter: blur(5px)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

{{EmbedLiveSample('blur_example','100%','236px','')}}

brightness()

Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de 0% convertirá la imagen completamente a negro. Un valor de 100% no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al 100% aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es 1 (equivalente a 100%).

filter: brightness(0.5)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

{{EmbedLiveSample('brightness_example','100%','231px','')}}

contrast()

Ajusta el contraste del elemento. Un valor superior a 0% creará una imagen completamente gris. Un valor de 100% deja al elemento sin cambios. Valores superiores a 100% son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es 1 (equivalente a 100%).

filter: contrast(200%)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

{{EmbedLiveSample('contrast_example','100%','203px','')}}

drop-shadow()

Aplica un efecto de sombra a la imagen. Una  sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo <shadow> (definido en CSS3 Backgrounds), con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad {{cssxref("box-shadow")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro <shadow> son los siguientes:

<offset-x> <offset-y> (requerido)
Son dos valores {{cssxref("<length>")}} para establecer la posición de la sobra respecto a la imagen. <offset-x> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <offset-y> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("<length>")}} para unidades posibles.
Si ambos valores son 0, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <blur-radius> y/o <spread-radius>).
<blur-radius> (opcional)
Es un tercer valor {{cssxref("<length>")}}. Mientras mayor sea el valor, mayor será el desenfoque, por lo que la sombra se vuelve más grande y clara. No se permiten valores negativos. Si no es especificado, su valor predeterminado será 0 (el borde de la sombra es nítido).
<spread-radius> (opcional)
Es el cuarto valor {{cssxref("<length>")}}. Valores positivos harán que la sombra se expanda, y valores negativos harán que la sombra se contraiga. Si no se especifica, su valor predeterminado será 0 (la sombra tendrá el mismo tamaño del elemento). 
Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.
<color> (opcional)
Véanse los valores {{cssxref("<color>")}} para las opciones posibles de palabras clave y notaciones. Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se usa el valor de la propiedad {{cssxref("color")}}. Por otro lado, la sombra en WebKit es transparente, y por lo tanto, es inútil si se omite <color>.
filter: drop-shadow(16px 16px 10px black)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

{{EmbedLiveSample('shadow_example','100%','300px','')}}

grayscale()

Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente a escala de grises. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de 0.

filter: grayscale(100%)

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

hue-rotate()

Aplica una rotación de tono (matiz) al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de 0deg deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de 0deg. Aunque no hay valor máximo, el efecto de valores encima de 360deg da la vuelta al círculo de colores.

filter: hue-rotate(90deg)
<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

invert()

Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja a la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de 0.

filter: invert(100%)

{{EmbedLiveSample('invert_example','100%','407px','')}}

opacity()

Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente transparente. Un valor de 100% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de 1. Esta función es similar a la propiedad {{cssxref("opacity")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.

filter: opacity(50%)

{{EmbedLiveSample('opacity_example','100%','210px','')}}

saturate()

Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente sin saturación. Un valor de 100% deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de 100% son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de 1.

filter: saturate(200%)

{{EmbedLiveSample('saturate_example','100%','332px','')}}

sepia()

Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente sepia. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de 0.

filter: sepia(100%)

{{EmbedLiveSample('sepia_example','100%','229px','')}}

Combinando funciones

Se puede combinar cualquier número de funciones para manipular la representación de la imagen. Los siguientes ejemplos aumentan el contraste y brillo de la imagen.

filter: contrast(175%) brightness(3%)

{{EmbedLiveSample('combination_example','100%','209px','')}}

Especificaciones

Especificación Estatus Comentarios
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }} {{ Spec2('Filters 1.0') }} Definición inicial

Compatibilidad de navegadores

{{Compat("css.properties.filter")}}

Véase también