CSS Mask Image Gradiente

CSS mask-image — máscaras alfa para interfaces modernas

A propriedade CSS mask-image aplica uma máscara alfa sobre qualquer elemento, permitindo que partes dele desapareçam, se misturem ou façam fade no fundo. Diferente do clip-path, que faz um corte binário (o pixel é visível ou invisível), a máscara aceita gradientes ou imagens onde valores intermediários ficam parcialmente transparentes — ideal para fade-outs suaves, bordas curvas e ícones coloridos por CSS.

A sintaxe mínima é mask-image: linear-gradient(black 50%, transparent 100%) para máscara em gradiente, ou mask-image: url(mask.svg) para uma imagem externa. A máscara se aplica ao elemento inteiro, incluindo filhos — uma única declaração consegue fazer fade de uma árvore DOM complexa.

A família completa de propriedades mask-*

• mask-image — a imagem, gradiente ou referência a um <mask> SVG
• mask-size — cover, contain ou dimensões explícitas (funciona como background-size)
• mask-repeat — no-repeat, repeat-x, round, etc.
• mask-position — âncora da máscara dentro do elemento
• mask-mode — alpha, luminance ou match-source (decide se brilho ou transparência controla a visibilidade)
• mask-composite — add, subtract, intersect, exclude para operações boolianas entre máscaras empilhadas, no estilo Photoshop

Suporte cross-browser

Chromium 120+ suporta as propriedades mask-* sem prefixo; Firefox 53+ suporta há anos; Safari historicamente exige o prefixo -webkit-. A declaração defensiva é escrever as duas formas:

.fade {
  -webkit-mask-image: linear-gradient(black 80%, transparent);
          mask-image: linear-gradient(black 80%, transparent);
}

Casos de uso reais

• Fade em prévia longa: o clássico padrão "ler mais" — aplica linear-gradient(black 70%, transparent) no rodapé de um card para o último parágrafo dissolver suavemente.
• Hero com borda curva: uma máscara radial ou SVG corta uma onda ou arco na base de uma foto de hero sem precisar de nós DOM extras.
• Variantes monocromáticas de ícones: mascarar um background-color sólido com um PNG/SVG preto-em-transparente para recolorir um ícone para qualquer cor da marca via CSS custom properties, sem exportar novos assets.
• Animações de revelação: animar mask-position ou mask-size para deslizar conteúdo para dentro — composto pela GPU e barato.

Perguntas frequentes

Qual a diferença entre mask-image e clip-path? O clip-path faz um corte binário: o pixel é visível ou não, sem opacidade parcial. O mask-image aceita gradientes alfa, então pixels podem ter 50% de transparência, blend ou feather. Use clip-path para formas poligonais duras, mask-image para fades suaves e máscaras baseadas em imagem.

SVG ou PNG para máscara? SVG é quase sempre melhor — escala perfeitamente em qualquer DPR, tem tamanho mínimo e pode ser embutido como data URI. PNGs deixam bordas borradas em telas retina e forçam uma requisição de rede.

Posso combinar mask-image com filter ou backdrop-filter? Sim. O elemento é renderizado, a máscara é aplicada e os filtros entram em cascata por cima. Dá pra empilhar blur, hue-rotate e máscara no mesmo elemento sem problema de performance em hardware moderno — máscaras e filtros são compostos pela GPU.

A máscara age só no background ou no elemento inteiro? No elemento inteiro, incluindo texto e nós filhos. Essa é a diferença-chave em relação a background-image: a máscara corta tudo que o elemento renderiza, e é por isso que o fade de texto longo funciona tão limpo.