Máscara-imagem - CSS-Tricks | CSS Almanac 2025

Um maskem CSS oculta parte do elemento ao qual é aplicado.

.el ( mask-image: url(star.svg); )

Digamos que você tenha um elemento com fundo fotográfico e um gráfico SVG em preto-e-branco para usar como máscara, como este:

Você pode definir a imagem como a background-imagee a máscara como mask-imageno mesmo elemento e obter algo assim:

As máscaras têm muito em comum com os planos de fundo, pois você pode dimensioná-los, posicioná-los e repeti-los, assim como os planos de fundo. Veja as propriedades relacionadas abaixo. Mas aqui está outra coisa interessante sobre as máscaras que compartilham com planos de fundo: podem ser gradientes.

Aqui está o mesmo gráfico de fundo, apenas com uma linear-gradientmáscara cobrindo-o, o que torna a parte superior transparente esmaecendo a parte inferior, que não é transparente de forma alguma:

Isso funciona porque o topo do linear-gradientestá transparent. Eu teria assumido que iria funcionar se era whiteassim, desde que o mask-typeera luminance, mas que não parecem funcionar em qualquer navegador para mim.

Falando em luminancemáscaras, isso não parece funcionar para imagens-como-máscaras que são um formato raster como JPG.webp ou PNG para mim. Atualização : o leitor Micheal Hall escreve com uma demonstração onde pode ter algo a ver com o uso de propriedades de mão longa. O Firefox parece apoiar esse conceito se você usar apenas a abreviação.

Mas as máscaras alfa parecem funcionar muito bem. Como em gráficos raster que usam transparência alfa real. Como isso:

E só para provar um ponto, uma animação colorida que você pode ver através da máscara:

A mask-imagepropriedade também pode ser usada diretamente nos elementos SVG. Por exemplo, verifique esta máscara elíptica que também tem um filtro desfocado:

Parece que você poderia pegar aquela máscara SVG e aplicá-la a outros elementos, mask-image: url(#mask);mas não acho que isso realmente funcione. Ele só funciona no SVG e tem o efeito colateral desagradável de apagar totalmente uma imagem se usado fora do SVG.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.