Aplicar efeitos a imagens com a propriedade mask-image do CSS

O mascaramento CSS oferece a opção de usar uma imagem como uma camada de máscara. Isso significa que você pode usar uma imagem, um SVG ou um gradiente como máscara para criar efeitos interessantes sem um editor de imagem.

Rachel Andrew

Quando você recorta um elemento usando a propriedade clip-path, a área cortada fica invisível. Se você quiser tornar parte da imagem opaca ou aplicar outro efeito a ela, use a máscara. Esta postagem explica como usar a propriedade mask-image no CSS, que permite especificar uma imagem para usar como uma camada de máscara. Isso oferece três opções. Você pode usar um arquivo de imagem como máscara, um SVG ou um gradiente.

Compatibilidade com navegadores

A maioria dos navegadores tem suporte parcial à propriedade de mascaramento CSS padrão. Você vai precisar usar o prefixo -webkit-, além da propriedade padrão, para alcançar a melhor compatibilidade com o navegador. Consulte Posso usar máscaras CSS? para informações completas sobre a compatibilidade com o navegador.

Embora o suporte do navegador usando a propriedade prefixada seja bom, ao usar a máscara para tornar o texto na parte de cima de uma imagem visível, cuide do que vai acontecer se a máscara não estiver disponível. Talvez seja interessante usar consultas de recursos para detectar o suporte a mask-image ou -webkit-mask-image e fornecer um substituto legível antes de adicionar a versão mascarada.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Como usar uma imagem como máscara

A propriedade mask-image funciona de maneira semelhante à propriedade background-image. Use um valor url() para transmitir uma imagem. A imagem da máscara precisa ter uma área transparente ou semitransparente.

Uma área totalmente transparente vai fazer com que a parte da imagem abaixo dela fique invisível. No entanto, o uso de uma área semitransparente permite que parte da imagem original apareça. Confira a diferença no bug abaixo. A primeira imagem é a imagem original de balões sem máscara. A segunda imagem tem uma máscara aplicada com uma estrela branca em um plano de fundo totalmente transparente. A terceira imagem tem uma estrela branca em um plano de fundo com uma transparência degradê.

Neste exemplo, também estou usando a propriedade mask-size com um valor de cover. Essa propriedade funciona da mesma forma que background-size. Você pode usar as palavras-chave cover e contain ou definir um tamanho para o plano de fundo usando qualquer unidade de comprimento válida ou uma porcentagem.

Você também pode repetir a máscara da mesma forma que repetiria uma imagem de plano de fundo, para usar uma imagem pequena como um padrão repetitivo.

Mascaramento com SVG

Em vez de usar um arquivo de imagem como máscara, você pode usar SVG. Há algumas maneiras de fazer isso. A primeira é ter um elemento <mask> dentro do SVG e referenciar o ID desse elemento na propriedade mask-image.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

A vantagem dessa abordagem é que a máscara pode ser aplicada a qualquer elemento HTML, não apenas a uma imagem. O Firefox é o único navegador que oferece suporte a essa abordagem.

No entanto, nem tudo está perdido, já que, no cenário mais comum de mascaramento de uma imagem, podemos incluir a imagem no SVG.

Mascaramento com um gradiente

Usar um gradiente CSS como máscara é uma maneira elegante de criar uma área mascarada sem precisar criar uma imagem ou um SVG.

Um gradiente linear simples usado como máscara pode garantir que a parte de baixo de uma imagem não fique muito escura abaixo de uma legenda, por exemplo.

Você pode usar qualquer um dos tipos de gradiente com suporte e ser criativo como quiser. O próximo exemplo usa um gradiente radial para criar uma máscara circular que ilumina a legenda.

Usar várias máscaras

Assim como nas imagens de plano de fundo, é possível especificar várias origens de máscara, combinando-as para conseguir o efeito desejado. Isso é útil principalmente se você quiser usar um padrão gerado com gradientes CSS como máscara. Elas geralmente usam várias imagens de plano de fundo e podem ser facilmente convertidas em uma máscara.

Como exemplo, encontrei um padrão de xadrez legal neste artigo. O código, usando imagens de plano de fundo, fica assim:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Para transformar esse padrão ou qualquer outro projetado para imagens de plano de fundo em uma máscara, substitua as propriedades background-* pelas propriedades mask relevantes, incluindo as prefixadas com -webkit.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

É possível criar alguns efeitos muito legais aplicando padrões de gradiente às imagens. Tente remixar o Glitch e testar outras variações.

Além do recorte, as máscaras CSS são uma maneira de adicionar interesse a imagens e outros elementos HTML sem precisar usar um aplicativo gráfico.

Foto de Julio Rionaldo no Unsplash.