01
Ajuste o alcance da sombra
Comece pela sombra de exemplo e crie uma segunda camada menor. Espalhamento negativo encolhe a área pintada; deslocamento move a posição. A opção de sombra interna afeta só a camada escolhida.
Ferramentas HTML e CSS
Gerador de efeitos CSSpara detalhes de cada elemento
Escolha sombra, borda e cantos, transformação ou filtro. A saída contém somente o efeito selecionado.
Gerador de efeitos CSS
Prévia em tempo real
O fundo colorido é apenas um exemplo e não entra no CSS exportado.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Os parâmetros ficam nesta aba; nenhuma imagem ou CSS é enviado.
Parâmetros do efeito
O CSS de Sombra da caixa está atualizado.
Uma sombra pode parecer pesada mesmo com a cor certa. O Gerador de efeitos CSS permite separar desfoque, espalhamento e opacidade em cada camada, conferindo o resultado antes de copiar box-shadow.
O Gerador de efeitos CSS guarda temporariamente as configurações de borda, transformação e filtro enquanto a aba estiver aberta. Trocar de modo ajuda a comparar o visual sem misturar propriedades na exportação.
Por que usar o Gerador de efeitos CSS
Duas intensidades de sombra no mesmo bloco
Um gerador de sombra CSS limitado a uma camada não permite separar a sombra ampla da sombra de contato. Adicione até quatro camadas, cada uma com deslocamento, cor, opacidade e opção interna próprios.
Parâmetros preservados, saída focada
O Gerador de efeitos CSS mantém os valores dos cantos, da transformação e do filtro na aba. Ao copiar um filtro, a sombra anterior e o fundo colorido da amostra não entram no CSS.
Entenda o valor antes de copiar
02
Confira cantos e ordem das funções
Vincule os quatro cantos para usar um raio ou defina cada um. Transformações saem na ordem mover, girar, escalar e inclinar; alterar essa ordem depois de copiar muda o resultado.
03
Exporte apenas CSS atualizado
A geração automática espera cerca de 350 ms após a última mudança. Desligada, use o botão ou Ctrl/Cmd+Enter. Exemplo, redefinição e remoção de camada mostram uma prévia antes de aplicar e permitem desfazer uma vez.
Quatro controles de efeitos em uma página
Sombras em camadas
O gerador de box shadow controla deslocamento X/Y, desfoque, espalhamento, cor, opacidade e inset em até quatro camadas. A saída é uma declaração box-shadow com vírgulas.
Bordas e cantos independentes
O gerador de bordas arredondadas vincula os cantos ou recebe quatro raios em px. Uma borda de largura zero vira border: none sem remover o raio dos cantos.
Transformações previsíveis
Mover, girar, escalar e inclinar seguem uma ordem fixa. Valores neutros são omitidos e todas as opções neutras resultam em transform: none.
Filtros que se combinam
O gerador de filtros CSS reúne desfoque, brilho, contraste, saturação, tons de cinza, sépia, matiz, inversão e opacidade. Apenas funções fora do valor neutro aparecem.
Limites do CSS produzido
- Uma declaração por vez
- Os valores dos outros modos ficam apenas na memória da aba. Cópia e arquivo .css incluem o efeito atual, sem seletor, HTML, prefixos antigos, conta ou URL compartilhável.
- Faixas e cores validadas
- São permitidas até quatro sombras e cores hexadecimais de seis dígitos. Desfoque negativo ou números fora da faixa bloqueiam a exportação e indicam o campo. Espalhamento negativo é aceito.
- Sombra de caixa não é drop-shadow
- box-shadow acompanha a caixa; filter: drop-shadow() pode seguir o contorno de uma imagem. Nem drop-shadow nem backdrop-filter são opções do modo filtro.
- Sem importar código pronto
- Este gerador não interpreta CSS colado, não cria animações, cartão 3D ou arquivo de imagem. O fundo da amostra é apenas ilustrativo e não entra no código.
Dúvidas sobre o Gerador de efeitos CSS
Qual é a diferença entre desfoque e espalhamento?
Desfoque suaviza a borda. Espalhamento aumenta ou diminui a área da sombra e pode ser negativo neste gerador.
Como fazer uma sombra interna?
Ative a opção inset na camada desejada. Ela desenha a sombra dentro da caixa sem mudar as outras camadas.
Como adicionar mais de uma sombra ao mesmo elemento?
Adicione até quatro camadas. O resultado reúne todas em uma declaração box-shadow separada por vírgulas.
Preciso pagar ou fazer cadastro para usar?
Não. Os controles funcionam no navegador, sem conta ou upload; os parâmetros não são salvos depois que a aba é fechada.
O que significa raio de desfoque zero?
Com zero, a borda da sombra não recebe suavização. Deslocamento e espalhamento ainda podem mudar o contorno visível.
Algo estranho na sombra ou no filtro?
Teste o Gerador de efeitos CSS no próximo cartão
Ajuste a amostra e copie só a declaração atual que seu componente precisa.