Os filtros CSS são performáticos?

A maioria dos filtros é acelerada por hardware pelo navegador. No entanto, valores grandes de `blur` ou a aplicação de muitos filtros a imagens grandes podem afetar o desempenho de rolagem em dispositivos mais antigos.

Que suporte de navegador devo esperar?

Os navegadores modernos têm um excelente suporte para filtros CSS. Para ambientes mais antigos, como o Internet Explorer, estes efeitos degradarão graciosamente e simplesmente não serão exibidos.

Posso aplicar vários filtros de uma vez?

Sim. A ferramenta combina todos os valores ativos numa única string de propriedade `filter`, que é a forma padrão de encadear múltiplos efeitos em CSS.

Cor e Design

Gerador de Filtro CSS

Q: Que filtros posso gerar aqui?

Pode ajustar as definições de `blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate` e `sepia`.

Live preview blur, brightness, hue-rotate and more.

Runs in your browser

Blur0pxBrightness100%Contrast100%Grayscale0%Hue rotate0°Invert0%Opacity100%Saturate100%Sepia0%

CSS

.filtered {
  filter: none;
}

Nota do editor

Understanding · Eight functions, one GPU-shader.

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

Quick answers.

›Which filters can I generate here?

You can adjust `blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, and `sepia` settings.

›Are CSS filters performant?

Most filters are hardware-accelerated by the browser. However, large `blur` values or applying many filters to large images can impact scroll performance on lower-end devices.

›What browser support should I expect?

Modern browsers have excellent support for CSS filters. For older environments like Internet Explorer, these effects will gracefully degrade and simply not show.

›Can I apply multiple filters at once?

Yes. The tool combines all active values into a single `filter` property string, which is the standard way to chain multiple effects in CSS.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Cor e Design