Gerador de Máscaras CSS
Use mask-image com gradientes para criar transições de opacidade e recortes suaves.
Propriedades CSS utilizadas
mask-imageUsa uma imagem ou gradiente como máscara de opacidade: áreas pretas ficam totalmente visíveis, áreas transparentes escondem o conteúdo, criando transições suaves de recorte.
-webkit-mask-imageAinda necessário para compatibilidade com o Safari, que requer o prefixo para reconhecer a propriedade de máscara.
Perguntas frequentes
Sim — clip-path recorta com bordas nítidas seguindo uma forma geométrica; mask permite transições suaves de opacidade usando gradientes ou imagens em escala de cinza.
Sim, basta trocar o gradiente por url('imagem.png') em mask-image.
Sim, é o uso mais comum — aplicar um gradiente de máscara no topo ou na base de uma lista com scroll para indicar que há mais conteúdo.
Ferramentas relacionadas
Gerador de Clip-path
Recorte elementos com polígonos e formas personalizadas usando clip-path.
Gerador de Filtros CSS
Combine blur, brightness, contrast, saturate, grayscale, sepia e hue-rotate.
Gerador de Gradientes
Gradientes lineares, radiais e cônicos com múltiplos stops de cor.