Propriedade CSS filter
A propriedade CSS filter aplica efeitos a imagens. Saiba sobre os valores e veja os efeitos ilustrados nos exemplos.
A propriedade CSS filter aplica efeitos gráficos — como desfoque, alteração de cor ou sombra — a um elemento durante a renderização, sem modificar a fonte original. É mais comumente usada em imagens, mas funciona em qualquer elemento, incluindo texto, planos de fundo e SVG.
Este capítulo abrange cada função de filtro que a propriedade aceita, como combinar vários filtros em uma única declaração e os casos práticos em que os filtros superam as alternativas.
Quando usar a propriedade filter
Use filter quando quiser um efeito visual que o navegador calcula a partir dos pixels existentes do elemento:
- Escurecer ou tingir uma imagem de destaque atrás de texto (
brightness,grayscale,sepia) em vez de editar o arquivo em um editor de imagens. - Suavizar um plano de fundo (
blur) para que o conteúdo em primeiro plano permaneça legível. - Chamar atenção no hover removendo um filtro de escala de cinza para revelar a cor completa.
- Adicionar uma sombra que segue a transparência com
drop-shadow— ao contrário debox-shadow, ele envolve a forma interna de um PNG/SVG em vez do retângulo delimitador.
Como os filtros são executados na GPU e afetam apenas a apresentação, eles animam suavemente e nunca alteram o arquivo fonte, o que os torna ideais para transições e estados de hover.
A propriedade filter aceita estas funções:
noneblur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.filter = "hue-rotate(360deg)"; |
Sintaxe
Sintaxe da Propriedade CSS filter
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Exemplos
Exemplo da propriedade filter com o valor "blur":
Exemplo da Propriedade CSS filter com o valor blur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "blur(3px)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Resultado
Exemplo de uso da propriedade filter para tornar a imagem mais brilhante:
Exemplo da Propriedade CSS filter com o valor brightness
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "brightness(150%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>No exemplo a seguir, o valor "grayscale" torna a imagem cinza:
Exemplo da propriedade filter com o valor "grayscale":
Exemplo da Propriedade CSS filter com o valor grayscale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "grayscale(80%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Aqui, o filtro "saturate" é aplicado à imagem com o valor de 300%.
Exemplo da propriedade filter com o valor "saturate":
Exemplo da Propriedade CSS filter com o valor saturate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "saturate(300%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "sepia":
Exemplo da propriedade filter com o valor sepia
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "sepia(70%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "contrast":
Exemplo da Propriedade CSS filter com o valor contrast
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "contrast(40%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "opacity":
Exemplo da propriedade CSS filter com o valor "opacity"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "opacity(0.4)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "invert":
Exemplo da propriedade CSS filter com o valor "invert"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "invert(0.7)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "hue-rotate":
Exemplo da propriedade CSS filter com o valor "hue-rotate"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "hue-rotate(90deg)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemplo da propriedade filter com o valor "drop-shadow":
drop-shadow() aceita os mesmos argumentos que a propriedade box-shadow — offset-x, offset-y, um raio de desfoque opcional e uma cor — mas segue a forma não transparente da imagem em vez do seu retângulo delimitador. Por isso é a escolha certa para ícones PNG e SVGs com transparência.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: drop-shadow(8px 8px 10px gray);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "drop-shadow(8px 8px 10px gray)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Combinando múltiplos filtros
Você pode aplicar várias funções de filtro em uma única declaração listando-as separadas por espaço. Elas são aplicadas na ordem em que estão escritas, de modo que o resultado de uma alimenta a próxima — reordená-las pode alterar o resultado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(100%) brightness(120%) blur(2px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>
This image is first turned to grayscale, then brightened, then blurred.
</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Como filter é animável, combiná-lo com uma transição é um padrão comum — por exemplo, converter uma foto em escala de cinza para cor total no hover:
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}Pontos importantes
- Um filtro cria um contexto de empilhamento e (com qualquer valor diferente de
none) um bloco contentor para os descendentes — isso pode afetar o layout de filhos com posicionamento absoluto efixed. - Valores elevados de
blur()são custosos. Raios de desfoque grandes em elementos grandes podem prejudicar o desempenho de rolagem, especialmente em dispositivos móveis. opacity()versus a propriedadeopacity: a função de filtro aplica opacidade como parte do pipeline de filtros, enquanto a propriedadeopacityisolada é mais simples e tem suporte ligeiramente mais amplo — prefira a propriedade a menos que esteja combinando-a com outros filtros.- Para filtrar o que está atrás de um elemento translúcido (efeito de vidro fosco) você precisa de
backdrop-filter, uma propriedade separada —filterafeta apenas os pixels do próprio elemento.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Não aplica nenhum efeito. Este é o valor padrão desta propriedade. | Experimente » |
| blur | Aplica desfoque em uma imagem. É especificado por um valor de comprimento. Quanto maior o valor, mais desfoque será aplicado. Se nenhum valor for especificado, utiliza-se 0. | Experimente » |
| brightness | Torna a imagem mais brilhante. Se o valor for 0 a imagem ficará preta. 100% é o valor padrão e mostra a imagem original. Valores acima de 100% tornam a imagem mais brilhante. | Experimente » |
| contrast | Ajusta o contraste de uma imagem. Se o valor for 0 a imagem ficará preta. 100% é o valor padrão e mostra a imagem original. Valores acima de 100% aplicam mais contraste à imagem. | Experimente » |
| drop-shadow | Aplica um efeito de sombra projetada na imagem. | Experimente » |
| grayscale | Converte a imagem para escala de cinza. 0% é o valor da imagem original. 100% torna a imagem cinza. Valores negativos não são permitidos. | Experimente » |
| hue-rotate | Aplica um efeito de rotação de matiz na imagem. É especificado em graus. O valor máximo é 360 graus. | Experimente » |
| invert | Inverte as amostras da imagem. 0 é o valor padrão. 100% deixa a imagem completamente invertida. | Experimente » |
| opacity | Define o nível de opacidade da imagem. Descreve a transparência da imagem. Se o valor for 0 a imagem fica completamente transparente. 100% é o estado atual da imagem. | Experimente » |
| saturate | Aplica efeito de saturação na imagem. 0% deixa a imagem completamente dessaturada. 100% é o valor padrão da imagem. Valores acima de 100% deixam a imagem super-saturada. | Experimente » |
| sepia | Converte a imagem para sépia. O valor padrão é 0%, 100% deixa a imagem completamente sépia. | Experimente » |
| url | A função url() recebe o caminho de um arquivo SVG que especifica um filtro e pode incluir uma âncora para um elemento de filtro específico. | |
| initial | Define a propriedade com seu valor padrão. | |
| inherit | Herda a propriedade do elemento pai. |