Atributo filter do CSS
- página anterior empty-cells
- Próxima página flex
Definição e uso
A propriedade filter define os efeitos visuais do elemento (geralmente <img>), como desfoque e saturação.
Veja também:
Tutorial CSS:Imagem CSS
Manual de Referência do DOM HTML:Propriedade filter
Exemplo
Converter todas as imagens para preto e branco (100% cinza):
img {
filter: grayscale(100%);
}
Dica:Mais exemplos TIY podem ser encontrados na parte inferior da página.
Sintaxe CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Dica:Para usar vários filtros, separe cada filtro com espaço (veja mais exemplos na parte inferior da página).
Detalhes técnicos
| Valor padrão: | none |
|---|---|
| Herança: | Não |
| Produção de animação: | Suporte. Veja:Atributos relacionados a animação. |
| Versão: | CSS3 |
| Sintaxe JavaScript: | object.style.filter="grayscale(100%)" |
Filtro de função
Notas:Usa valores percentuais (por exemplo, 75%) para o filtro, também aceita o valor como decimal (por exemplo, 0.75).
| Filtro | Descrição |
|---|---|
| none | Padrão. Define efeito sem efeito. |
| blur(px) |
Aplica efeito de borrão à imagem. Valores maiores geram mais borrão. Se for especificado um valor, use 0. |
| brightness(%) |
Ajusta a brilho da imagem.
|
| contrast(%) |
Ajusta a contraste da imagem.
|
| drop-shadow(h-shadow v-shadow blur spread color) |
Aplica efeito de sombra à imagem. Valores possíveis:
blur - opcional. Este é o terceiro valor, a unidade deve ser em pixels. Adiciona efeito de borrão à sombra. Quanto maior o valor, mais borrão será criado (a sombra ficará maior e mais brilhante). Não são permitidos valores negativos. Se não for especificado um valor, será usado 0 (a borda da sombra será muito nítida). spread - opcional. Este é o quarto valor, a unidade deve ser em pixels. Valores positivos farão a sombra se expandir e aumentar, enquanto valores negativos farão a sombra diminuir. Se não for especificado um valor, será usado 0 (a sombra terá o mesmo tamanho que o elemento). Notas:Chrome, Safari e Opera, talvez também outros navegadores, não suportam o quarto comprimento; se adicionado, não será exibido. color - opcional. Adiciona cor à sombra. Se não for especificado, a cor depende do navegador (normalmente preto). Este exemplo cria uma sombra vermelha, com 8px de largura e altura, e 10px de efeito de borrão: filter: drop-shadow(8px 8px 10px red); Dica:Este filtro é semelhante à propriedade box-shadow. |
| grayscale(%) |
Converter a imagem para escala de cinza.
Notas:Não são permitidos valores negativos. |
| hue-rotate(deg) |
Aplicar rotação de tom de cor na imagem. Este valor define o grau do círculo cromático. O valor padrão é 0deg, representando a imagem original. Notas:O valor máximo é 360deg. |
| invert(%) |
Inverter os amostras na imagem.
Notas:Não são permitidos valores negativos. |
| opacity(%) |
Definir o nível de opacidade da imagem. O opacity-level descreve o nível de transparência, onde:
Notas:Não são permitidos valores negativos. Dica:Este filtro é semelhante à propriedade opacity. |
| saturate(%) |
Definir a saturação da imagem.
Notas:Não são permitidos valores negativos. |
| sepia(%) |
Converter a imagem para marrom.
Notas:Não são permitidos valores negativos. |
| url(); |
A função url() aceita o local do arquivo XML do filtro SVG e pode incluir um âncora para o elemento de filtro específico. Exemplo: filter: url(svg-url#element-id); |
| initial | Defina essa propriedade para seu valor padrão. Veja initial. |
| inherit | Herda essa propriedade do elemento pai. Veja inherit. |
Mais exemplos
Exemplo borrado
Adicionar efeito de borrão à imagem:
img {
filter: blur(5px);
}
Exemplo borrado 2
Aplicar imagem de fundo borrada:
img.background {
filter: blur(35px);
}
Exemplo de brilho
Ajustar a brilho da imagem:
img {
filter: brightness(200%);
}
Exemplo de contraste
Ajustar a contraste da imagem:
img {
filter: contrast(200%);
}
Exemplo de sombra
Aplicar efeito de sombra à imagem:
img {
filter: drop-shadow(8px 8px 10px gray);
}
Exemplo de escala de cinza
Converta a imagem para escala de cinza:
img {
filter: grayscale(50%);
}
Exemplo de rotação de tom de cor
Aplique rotação de tom de cor na imagem:
img {
filter: hue-rotate(90deg);
}
Exemplo de inversão
Inverta os exemplos na imagem:
img {
filter: invert(100%);
}
Exemplo de nível de opacidade
Defina o nível de opacidade da imagem:
img {
filter: opacity(30%);
}
Exemplo de ajuste de saturação
Ajuste a saturação da imagem:
img {
filter: saturate(800%);
}
Exemplo de tons sepia
Converta a imagem para tons sepia:
img {
filter: sepia(100%);
}
Usar múltiplos filtros
Para usar vários filtros, separe cada filtro com um espaço. Observe que a ordem é importante (por exemplo, usar grayscale() após sepia() produzirá uma imagem completamente em preto e branco):
img {
filter: contrast(200%) brightness(150%);
}
Todos os filtros
Demonstre todas as funções de filtro:
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
Números com -webkit- indicam a primeira versão que usa o prefixo.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
Notas:Versões mais antigas do Internet Explorer (4.0 até 8.0) suportam o atributo não padrão "filter" descontinuado. Quando a suporte para versões 8.0 e inferiores do IE é necessário, é usado principalmente para opacidade.
- página anterior empty-cells
- Próxima página flex
