O que são filtros CSS?

Os filtros CSS permitem aplicar efeitos gráficos como desfoque ou mudança de cor a um elemento. Eles são comumente usados para imagens, planos de fundo e bordas.

Os filtros podem ser usados para criar efeitos visuais, aprimorar imagens ou criar elementos de design exclusivos sem a necessidade de ferramentas externas de edição de imagens.

Propriedades de filtro CSS suportadas

• blur()- Aplica um desfoque gaussiano ao elemento.
• brightness()- Ajusta o brilho do elemento.
• contrast()- Ajusta o contraste do elemento.
• grayscale()- Converte o elemento em tons de cinza.
• hue-rotate()- Aplica uma rotação de matiz ao elemento.
• invert()- Inverte as cores do elemento.
• opacity()- Ajusta a opacidade do elemento.
• saturate()- Satura ou dessatura o elemento.
• sepia()- Converte o elemento em sépia.

Como aplicar filtros

Usando o código CSS gerado por esta ferramenta, você pode aplicar filtros a qualquer elemento HTML. Veja como:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Compatibilidade do navegador

Os filtros CSS são amplamente suportados em navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. No entanto, navegadores mais antigos, como o Internet Explorer, não os suportam.