A propriedade filter do CSS aplica efeitos visuais a um elemento — desfoque, brilho, contraste e ajustes de cor que funcionam em imagens, fundos e até vídeo. Diferente de editores de imagem, os filtros rodam no navegador, então ficam nítidos em qualquer resolução e podem animar suavemente com transições.
Arraste os controles para empilhar múltiplas funções de filtro em uma cadeia. A cena de amostra atualiza em tempo real, e o código gerado combina tudo em uma única declaração filter pronta para sua folha de estilos.
Frequently Asked Questions
Q: Quais funções de filtro CSS existem?
Quais funções de filtro CSS existem? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() e drop-shadow(). Você pode encadear qualquer quantidade em uma propriedade filter.
Q: O filtro CSS é acelerado por GPU?
O filtro CSS é acelerado por GPU? Sim. A maioria das funções de filtro roda na GPU e anima a 60fps. blur() e drop-shadow() são as mais pesadas; use com moderação em elementos grandes.
Q: O filtro afeta o layout?
O filtro afeta o layout? Não. Filtros são puramente visuais — o elemento mantém tamanho e posição originais no fluxo do documento. Use transform para mudanças de tamanho.
Q: Posso animar filtros?
Posso animar filtros? Sim. Anime a propriedade filter com transition ou keyframes. Animar entre cadeias de filtros diferentes do mesmo comprimento interpola suavemente.
Q: Como faço uma imagem em escala de cinza que colore no hover?
Como faço uma imagem em escala de cinza que colore no hover? Use dois estados: img { filter: grayscale(100%); transition: filter .4s; } e img:hover { filter: grayscale(0); }. Um padrão clássico de portfólio.
Cores do Brasil
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
Verde Bandeira #009C3BO verde da bandeira nacional, símbolo das matas
Amarelo Bandeira #FFDF00O ouro do losango da bandeira brasileira
Azul Bandeira #002776O azul do círculo e das estrelas
Azul Azulejo #1E5FA8Herança dos azulejos portugueses em igrejas e casarões
Rosa Choque #FF1493A energia vibrante do carnaval e das marcas jovens
Verde Amazônia #228B22A floresta tropical, pulmão do planeta
Amarelo Ouro #FFD700O ouro do barroco mineiro de Ouro Preto
Terracota Nordestina #CD5C5CA argila do sertão e do artesanato nordestino
Anil #4B0082Cor do vestido tradicional das baianas
Branco Areia #EDE4D3As praias de areia clara do litoral
Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.