Como tornar uma imagem preto e branco com CSS: dicas

A +A −

Existem algumas maneiras de aplicar efeitos em imagens para torná-las preto e branco usando apenas a estilização CSS. A seguir, apresentamos algumas dessas técnicas:

Filtros CSS

Os filtros CSS oferecem uma maneira simples e flexível de converter imagens coloridas em preto e branco. Você pode usar o filtro grayscale() para obter esse efeito:

.classe__da_imagem {
    filter: grayscale(100%);
}

Blend Modes

Os blend modes também podem ser usados para transformar imagens coloridas em preto e branco. Experimente o modo de mistura luminosity com uma div de fundo branco ou preto para criar este efeito. Com o mesmo código, apenas alterando a cor de fundo, é possível aplicar outros efeitos interessantes.

<div class="fundo__branco">
    <img decoding="async" class="imagem" src="/img/imagem.webp" alt="Imagem em preto e branco com CSS blend mode">
</div>

.fundo__branco {
    background-color: white; /*Ou preto*/
}

.imagem {
    mix-blend-mode: luminosity;
}

Quando utilizar as técnicas acima para tornar imagens preto e branco?

Antes de aplicar, é importante entender os motivos pelos quais você pode querer usar imagens em preto e branco em seus projetos. Aqui estão algumas razões:

• Estilo clássico: imagens em preto e branco podem adicionar uma sensação de atemporalidade e elegância ao seu design.
• Ênfase na composição: sem a distração das cores, os espectadores podem se concentrar mais na composição e nos detalhes da imagem.
• Dramaticidade: o preto e branco pode criar contrastes dramáticos e evocar emoções fortes.

Criar imagens em preto e branco com CSS é uma maneira eficaz de adicionar estilo e impacto visual aos seus projetos da web. Experimente e divirta-se explorando as possibilidades criativas com CSS.

Fique ligado para mais dicas de ouro para tornar sua aplicação afiada.