# Filtros CSS (CSS Filter Effects)

> Guia completo de filtros CSS3 (filter effects). Aprenda blur, brightness, contrast, saturate e outros efeitos visuais nativos impressionantes. Domine!

URL: https://dpw.dev/css/filtros-css3-filter-effects-css/  
Publicado em: 2012-08-20  
Categoria: css  
Tags: animacao-css, interface  
Autor: Tárcio Zemel

[Vídeo no YouTube](https://www.youtube.com/watch?v=IGnGeNZc3WA)

O avanço de CSS está permitindo que sites evoluam constantemente e permitindo não ser mais necessário precisar de scripts externos para criar efeitos verdadeiramente surpreendentes. Alguns desses efeitos, certamente, conseguido com **filtros CSS**!

Existem muitos filtos CSS bastante úteis e poderosos e você verá agora o que cada filtro é capaz de fazer.

## O que são filtros CSS3

Filtros CSS (ou [Filter Effects Module Level 1](https://www.w3.org/TR/filter-effects-1/)) são capazes de produzir efeitos em imagens e outros elementos em um documento Web.

Imagine ser capaz de aplicar efeitos de Photoshop, como blur, tons de cinza e brilho aos elementos HTML, tais como formulários, imagens e qualquer outra coisa possível de se criar usando HTML/CSS.

Geralmente, um filtro CSS é composto pela seguinte sintaxe:

```
filter: <nome-do-filtro>(<valor>) [<nome-do-filtro>(<valor>)]* | none
```

Quer dizer, usa-se a propriedade `filter` seguida da diretiva de qual filtro será aplicado, sendo que é possível aplicar diversos filtros simultaneamente (ou nenhum, através da palavra-chave `none`).

Atualmente, a compatibilidade de filtros CSS é quase 100%, considerando o suporte dos principais navegadores de mercado. Então, é possível usá-los à vontade para conseguir efeitos visuais impressionantes.

<figure>

![Filtros CSS: tabela de compatibilidade de filtros com os principais navegadores.](/images/blog/filtros-css3-filter-effects-css/filtros-css-suporte-can-i-use_.webp)

<figcaption>

Filtros CSS já contam com um excelente suporte. Pode usar sem medo de ser feliz.

</figcaption>

</figure>

A seguir, veja um showcase de Filtros CSS e alguns exemplo do quê é possível fazer e que efeitos alcançar.

## blur()

<figure>

![Filtros CSS: demonstração da aplicação do filtro blur.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-blur.webp)

<figcaption>

Filtro CSS: blur()

</figcaption>

</figure>

O efeito blur -- ou _embaçado_ -- já é consagradamente usado em montagens e ilustrações para sites em todo o mundo, já que qualquer editor de imagens mais ou menos decente já oferece a possibilidade de usar o blur.

O bom da história é que, a partir de agora, é possível usar este efeito diretamente com CSS, valendo-nos do filtro `blur()`.

É possível especificar o _deviation_ do blur -- ou seja, quantos pixels vão se mesclar entre si -- através de medidas CSS. Para o exemplo acima, foram usados `10px`.

```
filter: blur(10px);
```

## grayscale()

<figure>

![Filtros CSS: demonstração da aplicação do filtro grayscale.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-grayscale.webp)

<figcaption>

Filtro CSS: grayscale()

</figcaption>

</figure>

Antes do advento dos filtros CSS3, desenvolvedores web usávamos uma variedade de hacks e técnicas para fazer a transição de uma imagem em preto e branco para ela ficar colorida.

Mas, independentemente de existirem dezenas de técnicas para isso, agora basta usar um pouco de CSS através do filtro `grayscale()`.

Usando porcentagem ou um valor de 0 a 1 (incluindo decimais), é possível especificar o quão próximo a tons de cinza a imagem deve ser apresentada.

Para o exemplo, foi usado:

```
filter: grayscale(.75);
```

## sepia()

<figure>

![Filtros CSS: demonstração da aplicação do filtro sepia.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-sepia.webp)

<figcaption>

Filtro CSS: sepia()

</figcaption>

</figure>

Para o caso de ser preciso usar um efeito sépia -- tonalidades entre o acinzentado e o amarronzado --, agora também é possível usando o filtro CSS `sepia()`.

Através da indicação de porcentagem ou decimais, basta indicar a "quantidade de sépia" que será usada na imagem.

Para o exemplo, usou-se:

```
filter: sepia(.9);
```

## saturate()

<figure>

![Filtros CSS: demonstração da aplicação do filtro saturate.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-saturate.webp)

<figcaption>

Filtro CSS: saturate()

</figcaption>

</figure>

O valor da saturação é medido em porcentagem ou decimais, usados como valores para `saturate()`.

Um valor de `100%` (ou `1`) é o default do elemento, podendo ser aumentado ou diminuído, a depender do efeito que se quer alcançar alterando-se a saturação.

O exemplo acima foi supersaturado com o código:

```
filter: saturate(300%);
```

## hue-rotate()

<figure>

![Filtros CSS: demonstração da aplicação do filtro hue-rotate.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-hue-rotate.webp)

<figcaption>

Filtro CSS: hue-rotate()

</figcaption>

</figure>

Agora, com CSS3, é possível alterar o valor da **matiz** de elementos através do filtro `hue-rotate()`.

O valor é especificado em graus e, inicialmente, isso pode soar confuso. Para facilitar, imaginem uma roda de cores; o número de graus determina o ponto dentro desta roda.

O efeito acima foi alcançado com:

```
filter: hue-rotate(60deg);
```

## invert()

<figure>

![Filtros CSS: demonstração da aplicação do filtro invert.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-invert.webp)

<figcaption>

Filtro CSS: invert()

</figcaption>

</figure>

É fácil inverter as cores de imagens com o filtro `invert()`, especificando uma porcentagem ou decimal para a quantidade dessa inversão.

O resultado acima foi alcançado com:

```
filter: invert(.9);
```

## opacity()

<figure>

![Filtros CSS: demonstração da aplicação do filtro opacity.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-opacity.webp)

<figcaption>

Filtro CSS: invert(). Perceba que a imagem não fica mais clara; trata-se de transparência aplicada em fundo branco.

</figcaption>

</figure>

O filtro `opacity()`, como sugere o próprio nome, controla a opacidade do elemento a que esteja aplicado.

Em outras palavras, aplica transparência ao elemento, admitindo valores em porcentagem ou decimal.

A diferença entre usar `filter: opacity()` e a propriedade `opacity` é que, com o filtro, navegadores podem decidir usar aceleração de hardware, tornando a aplicação do efeito mais performática.

Acima, temos:

```
filter: opacity(.5);
```

## brightness()

<figure>

![Filtros CSS: demonstração da aplicação do filtro brightness.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-brightness.webp)

<figcaption>

Filtro CSS: invert()

</figcaption>

</figure>

O filtro CSS `brightness()` aplica um multiplicador linear no elemento-alvo, fazendo-o parecer mais ou menos brilhante (_brightness_). Admite valores em porcentagem ou decimal.

O exemplo acima, com claridade dobrada, foi alcançado usando:

```
filter: brightness(2);
```

## contrast()

<figure>

![Filtros CSS: demonstração da aplicação do filtro contrast.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-contrast.webp)

<figcaption>

Filtro CSS: contrast()

</figcaption>

</figure>

Com os filtros de CSS3, também é possível ajustar o contraste de elementos (especificando os valores em porcentagem ou decimais).

Para o exemplo, aumentou-se bastante o contraste da imagem com:

```
filter: contrast(500%);
```

## drop-shadow()

Como indica o próprio nome, o filtro `drop-shadow()` coloca uma sombra no elemento-alvo.

A sintaxe é a mesma de `box-shadow()`; a diferença é que pode ser aplicado pelos navegadores com aceleração de hardware e, quando aplicado a elementos com transparência, como imagens, a sombra toma a forma do que é opaco, ao invés de só fazer uma sombra projetada em caixa.

Veja a diferença neste exemplo, em que o mesmo valor `7px 9px 9px rgba(0,0,0,.3)` é usado para o filtro e para a propriedade neste PNG transparente:

<figure>

![Filtros CSS: demonstração da aplicação do filtro drop-shadow em comparação com a propriedade drop-shadow.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-drop-shadow.webp)

<figcaption>

Pequena diferença...

</figcaption>

</figure>

## 2 super dicas sobre filtros CSS

Ainda existe um ou outro filtro CSS, mas, por serem bem mais complexos e/ou experimentais, ficam para um outro artigo. ;)

De qualquer maneira, 2 dicas sobre filtros CSS muito boas são as seguintes:

1. É possível usar múltiplos filtros ao mesmo tempo
2. É possível usar transições e animações em filtros CSS

### Filtros múltiplos simultâneos

<figure>

![Filtros CSS: demonstração da aplicação de filtros múltiplos.](/images/blog/filtros-css3-filter-effects-css/filtro-filter-css-multiplos-multiple.webp)

<figcaption>

Com a aplicação de filtros múltiplos, é possível chegar a resultados incríveis.

</figcaption>

</figure>

Lembra da formulazinha de uso de filter() no início do artigo? Lá consta que é possível usar múltiplos filtros CSS simultaneamente.

Com isso, potencializa-se o poder dos filtros e é possível chegar a resultados realmente admiráveis.

Por exemplo, chega-se ao resultado do exemplo usando:

```
filter: contrast(1.3) hue-rotate(-15deg) saturate(.75);
```

### Transições e animações em filtros CSS

Para a felicidade geral da nação dev, filtros CSS funcionam muito bem, obrigado, com transições e [animações CSS](/css/animacoes-css-introducao/).

Então, não se acanhe em usar `transition` e `@keyframes`/`animation` para dar aquele passo extra rumo a efeitos deslumbrantes com filtros.

Assista a nosso vídeo sobre filtros CSS no início do artigo para ver a demonstração de animações e filtros sendo usados.

## Conclusão

Para quem é dev das antigas, observar (e se beneficiar) a evolução do quê CSS se torna capaz é realmente emocionante.

Filtros CSS são um belo exemplo disso. Há não muito tempo atrás, chegar a efeitos como os proporcionados pelos filtros exigia, no mínimo, usar múltiplas imagens.

Felizmente, hoje em dia temos filtros CSS para nos ajudar a manipular o aspecto visual dos elementos, o que nos ajuda a conseguir resultados extraordinários.

E você, sabia que filtros CSS podiam fazer tudo isso? Tem usado os filtros em seus projetos? Conta pra gente nos comentários!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml