Como usar: Gerador de Vinheta CSS
- A prévia começa com uma vinheta radial. Escolha uma elipse (acompanha o formato da imagem) ou um círculo.
- Defina a Área sólida (centro totalmente visível) e o Fim do fade em (onde fica totalmente transparente).
- Use o Spotlight para deslocar a área visível para fora do centro.
- Copie o CSS.
Vinheta com mask-image
.vignette {
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}O centro permanece totalmente visível até a primeira parada e esmaece até ficar transparente na segunda. Diferente de uma sobreposição escura, a vinheta por máscara funde a imagem com o fundo real da página, então funciona com qualquer cor. Para esmaecimentos retos, veja Fade nas Bordas de Imagens com CSS.
Também pesquisado como: vinheta css, efeito vinheta css, css fade radial, máscara radial gradient, gerador de vinheta, vinheta em imagem css, fade circular imagem css.
Ferramentas que combinam com: Gerador de Vinheta CSS
- Gerador de Máscara CSS — Faça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda, topo e base, as quatro bordas, uma vinheta radial ou um spotlight, corte o elemento em listras — ou aplique uma máscara com um formato (estrela, coração, hexágono, seta…) com bordas suaves e esfumadas, o que o clip-path não consegue.
- Máscara de Forma em Imagem — Coloque qualquer foto dentro de uma forma — estrela, coração, hexágono, círculo, seta, balão de fala… — usando um mask-image em 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 Filtro CSS — Ajuste blur, brilho, contraste, saturação, matiz, escala de cinza, sépia, inversão e sombra projetada em uma imagem de exemplo ou na sua e copie o CSS do filter.
Perguntas frequentes
Como adiciono uma vinheta em uma imagem com CSS?
Aplique uma máscara radial-gradient: mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Ajuste as duas paradas para mudar o tamanho e a suavidade.
Como faço uma vinheta escura em vez de transparente?
Coloque a imagem sobre um fundo preto — a máscara a esmaece até o preto — ou use uma sobreposição radial-gradient com box-shadow: inset.
Elipse ou círculo?
A elipse acompanha as proporções da imagem, então todas as bordas esmaecem de forma uniforme; o círculo cria um spotlight redondo no meio.
Posso instalar o Gerador de Vinheta CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Vinheta 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.