Filter Effects: Os Filter Effects são uma forma de processar a renderização de um elemento antes de ser exibido no documento. Normalmente, renderizar um elemento via CSS ou SVG pode ser descrito como se o elemento, incluindo seus filhos, fosse desenhado em um buffer (como uma imagem rasterizada) e então esse buffer fosse composto no pai dos elementos. Os filtros aplicam um efeito antes do estágio de composição. Exemplos de tais efeitos são o desfoque, alteração da intensidade da cor e distorção de imagem.
Segue um exemplo de código utilizando o Filter Effects: https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_fegaussianblur
filter() function: Os filtros CSS são uma ferramenta poderosa que os desenvolvedores podem usar para obter efeitos visuais variados (como os filtros do Photoshop para o navegador). A propriedade de filtro CSS fornece acesso a efeitos como desfoque ou mudança de cor na renderização de um elemento antes de o elemento ser exibido. Os filtros são comumente usados para ajustar a renderização de uma imagem, um plano de fundo ou uma borda.
Filtros possíveis:
- blur()
- brightness()
- contrast()
- drop-shadow(
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
- url() - for applying SVG
Segue um exemplo de código utilizando a propriedade filter: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_grayscale
Observações: Segundo o site Can I Use (https://caniuse.com/#search=filter), o filter não tem suporte para todos os navegadores, e por esse motivo, é interessante utilizar o Autoprefixer CSS online (https://autoprefixer.github.io/) para adicionar os vendors prefixes (-webkit-filter) e ter o suporte necessário para rodar nos navegadores.
Links de busca:
https://www.w3.org/TR/filter-effects-1/
https://www.w3.org/TR/filter-effects/#FilterCSSImageValue
https://css-tricks.com/almanac/properties/f/filter/
filter
function seja para as manipulações com SVG, me corrijam se eu estiver errada. – Kamile Pimenta 21/06 às 14:55