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
/* 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:
filter: <filter-function> [<filter-function>]* | none;
Puedes usar url()
para hacer referencia a un elemento de filtro SVG. Para una referencia a un elemento <filter>
de SVG, usa la siguiente sintaxis:
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.
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 a100%
iluminan la imagen.
filter: brightness(2);
contrast()
-
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 a100%
crean un contraste.
filter: contrast(200%);
drop-shadow()
-
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 claveinset
y el parámetrospread
no están permitidos. Al igual que con todos los valores de la propiedadfilter
, cualquier filtro después dedrop-shadow()
se aplica a la sombra.
filter: drop-shadow(16px 16px 10px black);
grayscale()
-
Convierte la imagen a escala de grises. Un valor de
100%
es completamente en escala de grises. El valor inicial de0%
deja la entrada sin cambios. Los valores entre0%
y100%
producen multiplicadores lineales del efecto.
filter: grayscale(100%);
hue-rotate()
-
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 de0deg
deja la entrada sin cambios.
filter: hue-rotate(90deg);
invert()
-
Invierte las muestras en la imagen de entrada. Un valor de
100%
invierte completamente la imagen. Un valor de0%
deja la entrada sin cambios. Los valores entre0%
y100%
tienen multiplicadores lineales en el efecto.
filter: invert(100%);
opacity()
-
Aplica transparencia.
0%
hace que la imagen sea completamente transparente y100%
deja la imagen sin cambios.
filter: opacity(50%);
saturate()
-
Satura la imagen, con
0%
siendo completamente insaturado,100%
dejando la imagen sin cambios, y valores de más de100%
aumentando la saturación.
filter: saturate(200%);
sepia()
-
Convierte la imagen a sepia, con un valor de
100%
haciendo que la imagen sea completamente sepia y0%
sin hacer cambios.
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:
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 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 inicial | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
Heredable | no |
Valor calculado | como se especifica |
Animation type | a 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> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <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.
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);
}
<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.
#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
- Propiedad CSS
backdrop-filter
- Módulo de composición y combinación de CSS, incluidas las propiedades CSS
background-blend-mode
ymix-blend-mode
. - La propiedad CSS
mask
- SVG, incluido el elemento SVG
<filter>
y el atributo SVGfilter
. - Aplicación de efectos SVG al contenido HTML