Como pintar uma imagem de background com CSS

Tá aí um efeito simples e comum no design para web e que fica bem legal se for bem aplicado. Temos duas soluções óbvias para aplicar esse efeito. Solução 1: exportar a imagem com o efeito já aplicado, porém não é uma solução tão inteligente pois se precisarmos alterar o efeito da imagem vamos precisar exportar a imagem novamente. Solução 2: exportar a imagem ‘crua’ e aplicar o efeito via CSS, essa é a solução mais inteligente pois temos muito mais agilidade e flexibilidade.

Assista o vídeo e veja como aplicar esse efeito no seu projeto:

Veja como ficou:

O exemplo que implementamos no vídeo está disponível no Codepen. Veja como ficou, faça um fork no código e brinque um pouco mais.

Exemplo com pintura gradiente:

See the Pen Background image tint effect with CSS by Renato Carvalho (@renatocarvalho) on CodePen.

Exemplo com pintura sólida:

See the Pen Background image tint effect with CSS (Solid) by Renato Carvalho (@renatocarvalho) on CodePen.

Sobre o autor

Renato Carvalho

UI/UX Designer e especialista em desenvolvimento frontend. Apaixonado pelo que faz, sempre em busca de criar experiências incríveis.

Compartilhar esse post

    

Receba novidades da Superquadra no seu email