CSS Filters - Tratamento de imagens em sua página \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 32 Min 25 Seg Tempo restante da oferta: 01 32 25 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS Filters - Tratamento de imagens em sua página [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS Filters - Tratamento de imagens em sua página Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/css-filters-copy.jpg) Quem desenvolve páginas para a Web há um bom tempo deve se lembrar da época em que o CSS era bem limitado. O que os designers criavam, normalmente no PhotoShop, tinha de ser recortado e cuidadosamente organizado em tabelas para que fosse possível ter os efeitos de imagem e layout nas páginas. Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS. Uma propriedade ainda pouco utilizada, mas já bem suportada pelos browsers modernos, é a `filter`. Com ela podemos aplicar filtros em nossos elementos ou imagens como se estivéssemos fazendo tratamentos por um software de edição de imagens. Podemos fazer os seguintes tratamentos em nossos elementos: - **blur(px) -** nível de ofuscamento - **brightness(%) -** ajusta o brilho - **contrast(%) -** ajusta o contraste - **drop-shadow(h, v, blur, color) -** aplica sombras - **grayscale(%) -** transforma as cores do elemento para uma escala cinza - **hue-rotate(deg) -** altera as cores do elemento - **invert(%) -** inverte as cores do elemento - **opacity(%) -** controla a opacidade do elemento - **saturate(%) -** altera a saturação do elemento - **sepia(%) -** transforma as cores do elemento para um tom sépia Aqui temos um exemplo prático sobre o uso de cada uma dessas funções da propriedade `filter`. Caso você tenha que dar suporte a navegadores mais antigos, será obrigado a utilizar imagens já tratadas. Do contrário, poderá aproveitar essas funcionalidades. [ ![Vue.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/vuejs.svg) Curso Vue.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/vuejs-fundamentos) ## Vantagens Mas, quais as vantagens de termos isso no CSS se o designer pode nos enviar tudo pronto? Algumas pessoas dizem que uma das vantagens é continuar com a imagem original intacta, permitindo editá-la novamente caso sejam necessários ajustes. No entanto, muitos designers trabalham com os filtros separadamente da imagem, exatamente para não perder a original, então isso não é um grande motivo. Como pudemos ver no exemplo acima, é possível aplicar os filtros em qualquer elemento, não apenas em imagens. Caso você precise aplicar em um elemento dinâmico, um texto, uma animação, vídeo, etc, é bem mais prático fazer estes tratamentos pelo CSS. Em alguns designs que querem mostrar algo mais vivo, com ideia de movimento, etc, é comum o uso de transições. A propriedade `filter` também nos permite criar transições e animações, o que não daria com o uso de material já pronto vindo de um software de edição de imagem ou vídeo. Outra possibilidade é a integração com o JavaScript. Conforme você vai interagindo com a página, algum elemento pode mudar de cor, ou se você quiser deixar algum trecho menos destacado para dar atenção a outro elemento, que tal deixá-lo em uma escala cinza? Ou criar um efeito de vidro fosco? Voltando para o tratamento de imagens: imagine um site que tenha uma imagem padrão, seja de banner ou de fundo, e cada categoria do site tem uma cor, e a imagem deve seguir essa cor. Com os filtros do CSS, ao invés de ter uma imagem para cada cor, podemos carregar apenas uma imagem e mudar sua cor pela função `hue-rotate`. Quem utiliza sprites ao invés de FontIcons muitas vezes acaba tendo que repetir alguns ícones apenas para ter sua cor diferente. Com os filtros do CSS podemos mudar a cor desses sprites. Também há uma biblioteca baseada nos filtros do CSS, `CSSGram`, que recria os filtros do [Instagram](http://una.im/CSSgram/) apenas com CSS. Essas foram algumas ideias simples do que os filtros do CSS podem nos oferecer e que seriam difíceis ou impossíveis apenas com um material pronto vindo de softwares de edição de imagens. E você, tem alguma ideia em que os filtros seriam úteis? Já precisou deles em um projeto? Compartilhe com a gente aí nos comentários! [ ![Java - Testes unitários com JUnit 5](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/java.svg) Curso Java - Testes unitários com JUnit 5 Conhecer o curso ](https://www.treinaweb.com.br/curso/java-testes-unitarios-com-junit-5) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Dominando o Font Awesome ](https://www.treinaweb.com.br/blog/css-dominando-o-font-awesome) Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07102001/CSS-Box-Model-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Definindo o cálculo de dimensões com box-sizing ](https://www.treinaweb.com.br/blog/css-definindo-o-calculo-de-dimensoes-com-box-sizing) Aprenda a definir como o CSS calcula as dimensões dos seus elementos e evite que seu layout quebre inesperadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07101943/Aspect-Ratio-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS - Altura automática proporcional à largura sem JavaScript ](https://www.treinaweb.com.br/blog/css-altura-automatica-proporcional-a-largura-sem-javascript) Aprenda a definir elementos com dimensões proporcionais com CSS sem nenhuma linha de JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/02075846/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 2 – Itens) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-2-itens) Aprenda definitivamente a trabalhar com os Itens do CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/01182054/0-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Grid – Um Guia Interativo (Parte 1 – Containers) ](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers) Aprenda definitivamente a trabalhar com CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/01152334/container-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 2 - Itens) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-2-itens) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver as propriedades dos itens. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/float-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS: Float vs Inline Block - Qual usar em meus layouts? ](https://www.treinaweb.com.br/blog/css-float-vs-inline-block-qual-usar-em-meus-layouts) Você sabe quando utilizar "float" e "display: inline-block"? Veja as características de cada um e aprenda a aplicá-los em seus projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/semantica-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Semântica HTML: O que é e por que é importante ](https://www.treinaweb.com.br/blog/semantica-html-o-que-e-e-por-que-e-importante) Neste artigo, veremos a importância do uso da Semântica HTML e como utilizamos as tags em nossos projetos, mantendo assim o código semântico. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **01h 32min 25s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58