Como usar: Gerador de Máscara CSS
- Escolha um efeito: esmaecer uma borda, topo e base, todas as bordas, uma vinheta, um spotlight ou listras.
- Ajuste o tamanho do esmaecimento, a direção, a posição ou a largura das listras com os controles deslizantes.
- Teste com a sua própria imagem usando Usar minha imagem.
- Copie o CSS — ele inclui
-webkit-mask-image, que Chrome, Edge e Safari ainda precisam em algumas propriedades.
Como funcionam as máscaras CSS
mask-image usa uma imagem ou gradiente como estêncil: onde a máscara é opaca, o elemento aparece; onde é transparente, o elemento some, e no meio dela ele esmaece. Gradientes são as máscaras mais úteis porque não precisam de arquivos extras:
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Esmaecer todas as bordas exige dois gradientes combinados com
mask-composite: intersect(e-webkit-mask-composite: source-in), que o gerador adiciona para você. - Máscaras não alteram o layout nem a detecção de cliques — a área esmaecida continua clicável.
- Diferente de
opacity, uma máscara pode esmaecer apenas parte de um elemento; diferente de um gradiente sobreposto, ela mostra o fundo real por trás.
Máscaras de formato vs. clip-path
O efeito Formato transforma uma forma de clip-path em um SVG inline usado como mask-image. O resultado parece com clip-path, mas a borda pode ser esfumada, e o formato pode ser redimensionado com mask-size e repetido com mask-repeat.
Para cortes com bordas duras em vez de esmaecimento, use o Gerador de Clip-path. Para efeitos de cor, use o Gerador de Filtros CSS.
Também pesquisado como: mask-image generator, desvanecer bordas imagem css, máscara gradiente css, esmaecer imagem css, vinheta css, mask image linear gradient, webkit mask image, desvanecer bordas css.
Ferramentas que combinam com: Gerador de Máscara CSS
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Ondas SVG — Crie divisores ondulados de seção para landing pages: adicione ou remova ondas (até 6, cada uma com cor, opacidade e formato próprios), defina o número de cristas, a altura e a suavidade, escolha as cores e se a onda fica no topo ou na base.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Glassmorphism — Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.
Perguntas frequentes
Como esmaecer as bordas de uma imagem com CSS?
Aplique uma máscara de gradiente: mask-image: linear-gradient(to bottom, #000 70%, transparent) esmaece a base. Para esmaecer todas as bordas, combine um gradiente horizontal e um vertical com mask-composite: intersect — escolha “Esmaecer todas as bordas” aqui.
Ainda preciso de -webkit-mask-image?
Sim, para o melhor suporte. Navegadores baseados em Chromium e o Safari ainda dependem das versões -webkit- de algumas propriedades de máscara, então o gerador gera as duas.
Qual a diferença entre mask-image e clip-path?
O clip-path corta uma forma de borda dura; o mask-image pode esmaecer gradualmente usando um gradiente ou uma imagem como estêncil.
Como dar bordas suaves a uma forma de clip-path?
O clip-path sempre corta bordas duras. Escolha o efeito Formato aqui: as mesmas formas viram uma máscara SVG, e o controle Esfumar desfoca a borda para que a imagem desapareça suavemente.
Posso usar uma imagem ou SVG como máscara?
Sim — escolha “Minha imagem ou SVG como máscara” e envie um PNG com transparência ou um SVG. As partes opacas mostram o elemento e as transparentes o escondem; defina o tamanho, a repetição e a posição da máscara, depois copie o CSS e aponte o url() para o seu arquivo.
Posso instalar o Gerador de Máscara CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Máscara CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.