Gerador de Sombra de Gradiente CSS — Brilho de Gradiente Desfocado Atrás de um Elemento

Por que box-shadow não consegue fazer isso?

box-shadow só aceita uma única cor sólida — não há maneira de passar um linear-gradient(), radial-gradient() ou conic-gradient() para ele, não importa quantas paradas você jogue nele. Para obter um brilho ou "aura" colorido e desfocado atrás de um cartão, botão ou imagem, você precisa de um truque diferente: um pseudo-elemento ::before posicionado atrás do elemento (z-index: -1), dimensionado um pouco maior através de um inset negativo, preenchido com um fundo gradiente e suavizado com filter: blur(). É exatamente isso que esta ferramenta gera.

Como usar esta ferramenta

1. Escolha um Tipo de Gradiente — Linear (um traço reto através de um Ângulo), Radial (desvanece para fora do centro) ou Conic (varre em torno de um ponto central começando em um Ângulo).
2. Defina 2 a 4 paradas de cor, cada uma com sua própria cor e percentual de posição. Marque Adicionar parada de cor terceira e Adicionar parada de cor quarta para trazer mais.
3. Ajuste Desfoque (quão suave a borda do brilho parece), Expansão (quão longe o brilho se estende além das bordas do elemento), Opacidade e Raio da Borda (corresponda isto ao próprio border-radius do elemento para que o brilho siga sua forma).
4. Copie o CSS gerado para sua folha de estilos, em seguida adicione class="glow" ao elemento que você deseja o brilho atrás (ou renomeie a classe para corresponder à sua própria nomenclatura) — o elemento em si apenas precisa de position: relative, que a regra .glow gerada já define.
5. A Visualização mostra o efeito ao vivo; o Trecho HTML abaixo é o mesmo resultado como marcação com estilo inline que você pode colar em qualquer lugar onde uma folha de estilos não é conveniente.

Por que o pai precisa de position: relative?

O brilho vive em um pseudo-elemento ::before definido como position: absolute, que se posiciona em relação ao ancestral positioned mais próximo. Sem position: relative no pai, o brilho se ancoraria à página (ou ao próximo ancestral posicionado acima da árvore) e pousaria no lugar completamente errado. O CSS gerado define isto para você como parte da regra .glow.

A regra .glow também define isolation: isolate; junto com position: relative;. Por si só, position: relative não cria um novo contexto de empilhamento — então o pseudo-elemento z-index: -1 escaparia passando por seu irmão e se empilharia contra qualquer ancestral que faz possui a ordem de empilhamento da página, que pode ocultar o brilho completamente atrás de um fundo opaco mais acima da árvore. isolation: isolate fixa o contexto de empilhamento para .glow em si, então z-index: -1 significa apenas "atrás do meu próprio conteúdo," o que torna o brilho visível ao redor das bordas do elemento.

FAQ

Isto funcionará em todo navegador? Sim — ::before, filter: blur() e todas as três funções de gradiente foram suportadas em todos os navegadores principais por anos, sem prefixos de fornecedor necessários.

Posso colocar conteúdo real na frente do brilho? Sim, é para isso que serve — z-index: -1 mantém o gradiente estritamente atrás do fundo do elemento e do conteúdo, para que texto e imagens na frente permaneçam perfeitamente nítidos, mesmo com um desfoque pesado.

Eu só preciso de uma sombra desfocada de uma única cor, não um gradiente — existe uma ferramenta mais simples? Sim, use o Gerador de Sombra de Caixa CSS — um box-shadow simples é mais leve e não precisa de um pseudo-elemento quando uma única cor sólida é tudo o que você quer.

Eu quero o gradiente em si, não um brilho atrás de algo — onde está? O Gerador de Gradiente CSS cria uma declaração background: linear/radial/conic-gradient(...) simples para preencher um elemento diretamente, que também é de onde vêm os controles de parada de cor desta ferramenta.

E quanto a uma aparência de vidro fosco em vez de um brilho? Esse é um efeito diferente (um fundo translúcido e desfocado, não um brilho atrás do elemento) — veja o Gerador de Glasmorfismo CSS.

Privacidade

Tudo acontece no seu navegador. Suas cores escolhidas, ângulo e configurações nunca são enviados para um servidor — o CSS, HTML e visualização são gerados e atualizados localmente conforme você ajusta os controles.