Ferramentas de design grátis
Gerador de sombra de caixa CSS gratuito
Crie sombras CSS em camadas com até quatro camadas editáveis. Ajuste deslocamentos, desfoque, expansão, cor, opacidade e modo inset, visualize o resultado e copie o CSS sem login.
Criador de sombras
Crie camadas, visualize e copie uma box-shadow
Use até quatro camadas. A primeira camada listada é pintada por cima; mova as camadas quando suas bordas se sobrepuserem.
Camadas de sombra
2/4 camadas. Desative uma camada para comparar sem excluí-la.
Visualização ao vivo
Renderizado pelo navegadorContexto da visualização
Não copiado para a declaraçãoCSS gerado
box-shadow: 0px 14px 30px -8px rgba(20, 26, 36, 0.18), 0px 3px 7px -2px rgba(20, 26, 36, 0.12);A declaração inclui apenas camadas de sombra ativas. Cores de visualização, tamanho e raio são incluídos somente no download de demonstração opcional.
A ordem das camadas e o contexto da visualização podem mudar a aparência de uma sombra. Teste a declaração copiada no componente real, especialmente quando houver overflow ou estados de foco.
Como criar uma sombra de caixa CSS
Etapa 1
Escolha uma predefinição ou comece com uma camada
Use um ponto de partida pequeno e editável ou mantenha a camada padrão e defina você mesmo a geometria.
Etapa 2
Ajuste e ordene cada camada de sombra
Ajuste X, Y, desfoque, expansão, cor, opacidade e inset. Adicione, desative, remova ou mova camadas conforme a prévia muda.
Etapa 3
Revise a prévia e copie o CSS
Confira a sombra contra a superfície selecionada e copie somente a declaração box-shadow ou baixe uma regra CSS de demonstração.
Entenda os valores da sombra de caixa CSS
O editor mantém a sintaxe CSS visível enquanto você trabalha: deslocamentos posicionam a sombra, desfoque a suaviza, expansão altera seu tamanho e cor mais opacidade controlam sua intensidade.
O deslocamento define a direção
X move a sombra para a esquerda ou direita e Y para cima ou baixo. Deslocamento zero mantém a sombra centralizada, o que é útil para contornos e brilhos.
O desfoque controla a suavidade
Um desfoque de 0 mantém uma borda nítida. Valores maiores não negativos difundem a borda para mais longe do elemento; o desfoque não pode ser negativo na sintaxe CSS.
A expansão altera o tamanho da sombra
A expansão positiva aumenta a forma da sombra antes do desfoque, enquanto a expansão negativa a contrai. Isso é separado da suavidade da borda; por isso, altere um valor por vez ao ajustar.
Crie sombras em camadas e inset
Várias sombras são separadas por vírgulas e pintadas do primeiro item para baixo. Use a lista de camadas para tornar essa ordem deliberada, em vez de adivinhá-la em uma folha de estilo.
A primeira camada é pintada por cima
Mova uma camada para cima quando sua borda ou destaque deve ficar sobre as outras. O CSS copiado preserva a ordem visível da lista.
Combine camadas de contato e ambiente
Uma camada mais estreita e com menos desfoque pode ficar junto de uma camada mais larga e suave para criar uma elevação medida. Trate isso como um padrão inicial, não como uma receita realista garantida.
Use inset por camada
Inset se aplica apenas à camada selecionada; assim, você pode combinar uma borda interna com uma elevação externa ou criar um campo rebaixado sem alterar as outras sombras.
Teste a sombra no contexto
A mesma declaração pode parecer diferente em superfícies claras e escuras ou em outro raio. Ajuste o contexto da prévia para avaliar o visual, mantendo esses controles separados do valor de sombra copiado.
Altere as cores da tela e do elemento
Experimente uma tela discreta e um elemento contrastante, depois compare uma superfície clara e uma escura. Essas cores afetam somente a prévia ao vivo e o CSS de demonstração.
Corresponda ao raio dos cantos
Uma sombra de caixa segue o raio da borda do elemento. Faça o raio corresponder ao do cartão, botão, campo ou painel que pretende estilizar antes da decisão final.
Separe as configurações de prévia da saída
A cópia da declaração retorna somente box-shadow. O download de CSS inclui uma pequena regra de demonstração anotada para que você veja o contexto da prévia sem confundi-lo com a saída obrigatória.
Use o CSS e evite problemas comuns
Uma declaração válida ainda pode parecer errada quando o contêiner real a recorta ou quando o componente precisa de um tratamento completo de foco. Use o resultado como uma parte da revisão final da interface.
Sombras não reservam espaço no layout
Box-shadow não altera as dimensões do modelo de caixa do elemento. Adicione margem ou espaço ao redor no layout real quando o visual precisar de espaço.
Overflow pode recortar o efeito
Confira overflow do elemento pai, recorte e contexto de empilhamento quando uma sombra desaparecer em uma borda. A prévia isolada não pode reproduzir todos os layouts hospedeiros.
Revise foco e contraste na interface final
Uma sombra pode apoiar um estado de foco ou selecionado, mas não é uma auditoria de acessibilidade. Confira contraste, forma, indicações que não dependem de cor e todos os estados interativos no componente concluído.
Privacidade e limites
O editor funciona nesta aba do navegador. Ele não envia nem salva suas configurações de sombra, e nenhuma conta é necessária. O fundo da prévia, cor do elemento, raio e tamanho são controles de contexto e não são incluídos na declaração box-shadow copiada.
- • Aceita até quatro camadas com valores em px e cores HEX opacas mais opacidade; não analisa strings box-shadow arbitrárias.
- • Fundo de prévia, cor do elemento, tamanho e raio são controles de contexto e não são adicionados silenciosamente à cópia da declaração.
- • As configurações da aba atual são redefinidas ao recarregar; não há compartilhamento por URL, exportação Tailwind, criador de animação nem projeto salvo.
- • A prévia não pode reproduzir todos os layouts hospedeiros, regras de overflow, contextos de empilhamento ou requisitos de estado de foco.
Perguntas frequentes
Este gerador de sombra de caixa CSS é gratuito?
Sim. Você pode criar, visualizar, copiar e baixar uma sombra de caixa CSS online sem cadastro ou login.
Posso criar várias sombras de caixa?
Sim. O editor aceita até quatro camadas de sombra separadas por vírgula. A primeira camada listada é pintada por cima, portanto a ordem das camadas pode alterar bordas sobrepostas.
O que significam os valores de box-shadow?
Cada camada usa deslocamento X, deslocamento Y, desfoque, expansão, cor, opacidade e uma palavra-chave inset opcional. A ordem copiada é inset, X, Y, desfoque, expansão e depois cor.
Qual é a diferença entre desfoque e expansão?
O desfoque suaviza a borda e não pode ser negativo. A expansão aumenta ou contrai a forma da sombra antes do desfoque e, por isso, pode ser positiva ou negativa.
O que faz inset?
Inset desenha aquela camada dentro do limite do elemento, em vez de fora dele. Cada camada tem sua própria configuração inset, portanto sombras internas e externas podem ser combinadas.
Por que a ordem das camadas importa?
O CSS pinta a primeira sombra de uma lista separada por vírgula acima das sombras posteriores. Use os controles de mover para colocar uma camada de contato, contorno ou destaque na ordem pretendida.
box-shadow segue o raio da borda?
A sombra segue o raio da borda do elemento. Use o raio da prévia para verificar a forma esperada e depois teste a declaração no componente real.
Por que minha sombra de caixa está sendo recortada?
Um elemento pai com recorte de overflow, um contêiner apertado ou um contexto de empilhamento pode ocultar parte de uma sombra. Box-shadow também não reserva espaço no layout; portanto, deixe espaço ao redor do elemento quando necessário.
Posso usar uma sombra de caixa como anel de foco?
Ela pode fazer parte de um estilo de foco, mas uma sombra gerada não prova que todo estado de foco seja visível ou acessível. Confira contraste, espessura, indicações que não dependem de cor e o componente final no contexto.
A ferramenta salva ou envia minhas configurações?
Nenhum serviço externo é usado pelo editor. As configurações permanecem na aba atual do navegador e são redefinidas quando a página é recarregada; a ferramenta não importa nem analisa uma string box-shadow existente.
Ferramentas relacionadas
Escolha uma cor de sombra
Seletor de cores
Escolha uma cor visualmente ou informe um valor HEX; depois, ajuste RGB, HSL e opacidade. Visualize o resultado, compare tons próximos e copie o código de cor exato sem login.
Confira o contraste de cores
Verificador de contraste de cores
Teste cores de texto e fundo segundo WCAG 2.2 AA e AAA. Veja a proporção de contraste exata, visualize o tamanho e o peso de fonte selecionados e identifique se o par é aprovado.
Crie um gradiente CSS
Gerador de gradiente CSS
Crie gradientes lineares, radiais ou cônicos com duas a seis paradas de cor. Visualize o resultado ao vivo, ajuste a direção ou origem relevante e copie CSS pronto para usar sem fazer login.
Otimize um SVG
Otimizador de SVG
Envie ou cole marcação SVG, otimize-a localmente com SVGO e compare o código, tamanho do arquivo e resultado visual antes de baixar. Não é necessário login nem envio ao servidor.