Gerador de box-shadow CSS
NovoCrie box-shadows CSS de várias camadas com predefinições e pré-visualização ao vivo. Copie o CSS, o valor ou o estilo React num instante.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
Cria Qualquer Box-Shadow CSS Visualmente — Sem Tentativa e Erro
Este gerador de box-shadow CSS gratuito substitui a adivinhação tediosa no editor de código por um canvas visual em tempo real. Ajusta os sliders de deslocamento, desfoque, expansão e opacidade — a sombra no elemento de pré-visualização atualiza-se instantaneamente — e o CSS pronto a copiar fica disponível no fundo no formato à tua escolha. Nada é enviado para servidores, não precisas de conta, e todos os cálculos correm localmente no teu browser.
Começa com uma das oito predefinições incorporadas ou a partir de uma camada em branco. Adiciona múltiplas camadas de sombra para construir efeitos de profundidade realistas, alterna entre fundo escuro e claro para verificar o contraste, e escolhe o formato de saída: declaração CSS completa, valor de sombra isolado, ou string de estilo inline em camelCase para React. O gerador cobre tudo, desde elevação subtil de cartões até extrusão neumórfica e efeitos de brilho neon.
Compreender os Seis Parâmetros do box-shadow
Deslocamento X e Y posicionam a sombra em relação ao elemento — X positivo move-a para a direita, Y positivo para baixo. Deslocamentos negativos movem-na para a esquerda ou para cima, úteis para efeitos de sombra com iluminação vinda de cima. O raio de desfoque controla a suavidade das arestas: zero produz um contorno nítido e preciso; valores maiores criam um esbatimento gradual e difuso que sugere profundidade natural. O raio de expansão aumenta ou reduz a sombra antes de aplicar o desfoque — uma expansão negativa com desfoque amplo mantém a sombra dentro da pegada natural do elemento, a técnica por trás da maioria das sombras de cartões realistas.
A cor é tipicamente um valor escuro semi-transparente como `rgba(0, 0, 0, 0.12)` para elevação neutra, ou um matiz vivo para efeitos de brilho. O slider de opacidade permite ajustar o canal alfa independentemente do seletor de cor. O botão Inset inverte a direção da sombra, desenhando-a dentro da caixa de contorno para criar reentrâncias, inputs encovados e estados de botão pressionado — funcionalidades que o `filter: drop-shadow()` não consegue replicar.
Sombras em Múltiplas Camadas para Profundidade Profissional e Realista
Uma única sombra grande parece artificial — assemelha-se a um filtro genérico de Photoshop em vez de luz real. UI profissional usa três a cinco camadas de sombra sobrepostas, onde cada uma aproximadamente duplica o deslocamento e o desfoque enquanto reduz a opacidade para metade. Esta técnica imita a forma como a luz se dispersa fisicamente a partir de uma fonte e cria uma sombra que parece natural em qualquer tamanho ou distância de visualização.
Este gerador suporta até oito camadas independentes. Cada camada tem o seu próprio deslocamento, desfoque, expansão, cor, opacidade e botão inset. O ícone de olho em cada camada permite alternar a visibilidade para uma comparação instantânea antes/depois sem eliminar a camada. A predefinição Deep mostra uma pilha graduada de três camadas; Floating usa duas camadas complementares para sugerir que o elemento está levantado acima da página; Material reproduz a especificação de elevação multi-camada do Google Material Design.
Predefinições: Cartão, Nítida, Neumórfica, Brilho e Mais
A predefinição Soft card produz uma elevação quase impercetível — elevação suficiente para separar um cartão branco da página sem competir com o seu conteúdo. Crisp dá uma sombra de aresta dura sem desfoque, popular nas tendências de design brutalista e retro. Material reproduz a especificação de sombra multi-camada do Google Material Design para aplicações com um sistema de profundidade familiar ao estilo Android.
Neumorphic combina um realce luminoso no canto superior esquerdo com uma sombra escura no canto inferior direito para fazer um elemento parecer extrudido de uma superfície correspondente. Glow Blue demonstra como uma sombra colorida sem deslocamento cria um botão luminoso ou destaque hero — altera a cor para corresponder à tua marca. Inset Well mostra a técnica inset para elementos de UI encovados como campos de texto e estados pressionados. Carrega qualquer predefinição e ajusta os sliders para a levar exatamente onde o teu design precisa.
box-shadow vs filter: drop-shadow vs Sombras do Figma — Qual Usar?
box-shadow aplica-se à caixa retangular do elemento. O filter: drop-shadow() traça o contorno do canal alfa do elemento — correto para PNGs transparentes e recortes SVG, mas sem suporte a inset, raio de expansão ou empilhamento multi-camada. Para todos os elementos de UI padrão (cartões, botões, modais, painéis), `box-shadow` é a ferramenta certa.
O Figma e o Adobe XD oferecem painéis de design de sombras, mas os seus resultados são valores de ferramentas de design — nem sempre compatíveis com CSS sem conversão manual. Este gerador produz CSS válido e pronto para produção diretamente, eliminando o passo de tradução. Ao contrário do plano gratuito limitado do Figma ou do modelo de subscrição do Adobe XD, o UtiloKit é completamente gratuito, corre em qualquer browser sem instalação, e produz múltiplos formatos de saída (CSS, valor, React) sem necessitar de uma conta numa ferramenta de design.
Desempenho, Privacidade e Três Formatos de Cópia
Um `box-shadow` estático é pintado uma vez e composto de forma económica — sem preocupações de desempenho para a maioria das UI. Animá-lo diretamente desencadeia uma repintura em cada frame. A alternativa eficiente: adiciona um pseudo-elemento `::after` com a sombra de destino já aplicada, e depois usa `transition: opacity` nesse elemento. A GPU compõe a opacidade sem repintar a sombra, dando uma animação fluida sem qualquer custo de repintura.
Depois de ajustares a tua sombra, copia no formato que o teu projeto precisa: propriedade CSS para folhas de estilo, apenas valor para variáveis CSS ou mapas SCSS, ou estilo inline React para props `style` em JSX e Styled Components. A tua configuração nunca é guardada num servidor nem enviada para qualquer lugar — fecha o separador e desaparece. Adiciona a página aos favoritos e volta sempre que precisares de iterar num design de sombra.
Funciona em Computador, iPhone, Android e Todos os Browsers Modernos
O gerador de box-shadow é totalmente responsivo e funciona em qualquer dispositivo com um browser moderno. No computador, tens uma disposição de três colunas com a pilha de camadas à esquerda, a pré-visualização ao centro e o código gerado à direita. No iPhone e no Android, a disposição colapsa para uma pilha vertical com sliders e seletores de cor otimizados para toque que utilizam o seletor de cor nativo do sistema.
Todos os botões de cópia usam a Web Clipboard API suportada pelo Safari 13.1+, Chrome 66+, Firefox 90+ e Edge 79+ — o que significa que a funcionalidade de cópia funciona em browsers móveis modernos sem qualquer solução alternativa. Sem download de aplicação, sem criação de conta, sem limites de utilização. Abre o URL em qualquer dispositivo e começa a criar imediatamente.
Frequently asked questions
O que é o box-shadow CSS e para que serve?
A propriedade CSS `box-shadow` adiciona um ou mais efeitos de sombra a um elemento HTML. Cada sombra é definida por até seis valores: uma palavra-chave `inset` opcional, um deslocamento horizontal, um deslocamento vertical, um raio de desfoque, um raio de expansão e uma cor. Deslocamentos horizontais positivos empurram a sombra para a direita; deslocamentos verticais positivos empurram-na para baixo. Múltiplas sombras são separadas por vírgulas e renderizadas da frente para trás. É o mecanismo CSS principal para adicionar profundidade visual, hierarquia de elevação, efeitos de brilho e estilo neumórfico a componentes de UI sem recurso a imagens.
Qual é a sintaxe correta do box-shadow em CSS?
A sintaxe completa é: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Apenas `offset-x`, `offset-y` e `color` são obrigatórios; `blur-radius` e `spread-radius` assumem o valor 0 se omitidos, e `inset` fica como sombra exterior por defeito. Uma sombra típica de cartão tem o aspeto: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Empilha sombras ilimitadas separando-as com vírgulas — renderizam da frente para trás (a primeira listada fica em cima). Este gerador produz a declaração completa incluindo o nome da propriedade `box-shadow:`, ou apenas o valor se preferires.
Qual é a diferença entre blur-radius e spread-radius?
O blur-radius controla a suavidade das arestas: zero dá uma aresta dura e nítida que corresponde exatamente à forma do elemento; valores maiores criam um esbatimento progressivamente mais suave e difuso. O spread-radius expande ou reduz toda a sombra antes de o desfoque ser aplicado: valores positivos expandem-na para além da fronteira do elemento, valores negativos contraem-na para dentro. As sombras de aparência mais realista usam um desfoque moderado com uma expansão ligeiramente negativa, mantendo a sombra próxima da pegada do elemento em vez de se dispersar demasiado. Esta é a técnica usada nas predefinições Deep e Floating.
Como crio uma box-shadow inset em CSS?
Adiciona a palavra-chave `inset` no início da declaração de sombra: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Uma sombra inset é desenhada dentro da caixa de contorno do elemento em vez de atrás dele, criando uma aparência encovada ou pressionada. Usos comuns incluem: campos de formulário (mostrando profundidade de foco), trilhos de interruptores toggle, estados ativos de botões e contentores de texto em relevo. Este gerador tem um botão Inset no painel de controlo de cada camada — ativa-o e a sombra inverte-se imediatamente no elemento de pré-visualização.
Posso empilhar múltiplas box-shadows num único elemento?
Sim — o CSS permite qualquer número de sombras separadas por vírgulas num único elemento. Renderizam na ordem listada, com a primeira sombra em cima. Empilhar múltiplas camadas é a técnica chave para profundidade suave e realista — uma única sombra grande parece artificial, enquanto três a cinco camadas graduadas imitam a forma como a luz se dispersa fisicamente. Este gerador suporta até oito camadas independentes, cada uma com o seu próprio deslocamento, desfoque, expansão, cor, opacidade e botão inset. Um ícone de olho permite mostrar/ocultar camadas individuais para uma comparação rápida antes/depois sem as eliminar.
Como crio uma sombra neumórfica em CSS?
O neumorfismo usa duas sombras opostas num elemento cuja cor de fundo corresponde à página: uma sombra clara (quase branca) apontando para o canto superior esquerdo, e uma escura (preto com baixa opacidade) apontando para o canto inferior direito. Isto faz o elemento parecer extrudido da superfície de fundo. Uma declaração neumórfica clássica: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. O fundo do elemento deve corresponder exatamente ao fundo da página para a ilusão funcionar. A predefinição Neumorphic neste gerador fornece um ponto de partida pronto a usar — muda o fundo da pré-visualização para 'Cinzento suave' para o ver em contexto.
Como crio um efeito de brilho com box-shadow?
Usa deslocamento zero, um raio de desfoque amplo e um valor colorido: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. Deslocamento zero faz o brilho irradiar uniformemente em todas as direções. Uma expansão positiva empurra o brilho mais para longe do elemento. Combinar duas camadas — uma com desfoque menor e maior opacidade para um núcleo brilhante, e outra com desfoque amplo e menor opacidade para o halo ambiente — produz um efeito luminoso mais convincente. A predefinição Glow Blue demonstra isto com uma abordagem de duas camadas. Muda a cor para qualquer matiz para brilhos de destaque personalizados.
Como crio uma sombra em camadas suave e realista?
Em vez de uma única sombra grande, empilha três a cinco camadas onde cada uma aproximadamente duplica o deslocamento e o desfoque enquanto reduz a opacidade para metade: por exemplo, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Esta técnica imita a forma como a luz se dispersa fisicamente a partir de uma fonte pontual e permanece convincente a qualquer nível de zoom ou resolução de ecrã. As predefinições Deep e Floating neste gerador são construídas exatamente sobre este princípio — três camadas graduadas que parecem naturais a qualquer escala.
Qual é a diferença entre box-shadow e filter: drop-shadow()?
`box-shadow` segue sempre a caixa retangular de contorno do elemento, independentemente do seu aspeto visual. `filter: drop-shadow()` traça o contorno do canal alfa do elemento — útil para recortes PNG transparentes ou ícones SVG onde queres que a sombra siga a forma em vez do seu retângulo delimitador. Para componentes de UI padrão (cartões, botões, painéis, diálogos), `box-shadow` é o correto: é mais rápido a renderizar, suporta modo inset, aceita raio de expansão e permite múltiplas camadas sobrepostas. Usa `filter: drop-shadow()` apenas quando o fundo transparente do elemento é relevante para a forma da sombra.
O box-shadow afeta o layout CSS ou as áreas de clique?
Não. O `box-shadow` é puramente um efeito visual renderizado fora do fluxo normal do layout. Nunca empurra elementos irmãos, nunca aumenta a área de conteúdo com scroll, e não tem efeito na largura, altura, margem ou padding calculados do elemento. As sombras estendem-se visualmente para além da caixa do elemento mas são ignoradas pelo motor de layout. Isto significa que podes adicionar sombras generosas a uma grelha compacta sem quebrar o layout — embora possas querer adicionar `overflow: visible` no contentor pai para garantir que a sombra não é cortada.
Como copio o CSS gerado no formato React ou Tailwind?
Depois de construíres a tua sombra, o gerador oferece três formatos de saída. <strong>Copiar CSS</strong> dá a declaração completa da propriedade (`box-shadow: …;`) pronta para qualquer folha de estilos. <strong>Copiar valor</strong> dá apenas o valor da sombra — útil como variável SCSS, valor de propriedade CSS personalizada ou entrada `extend.boxShadow` do Tailwind. <strong>Estilo React</strong> produz formato camelCase (`boxShadow: '…'`) para objetos de estilo inline JSX ou Styled Components. Para Tailwind, cola o valor no teu `tailwind.config.js` em `theme.extend.boxShadow` para criar uma classe utilitária de sombra personalizada.
Este gerador de box-shadow é melhor do que cssgenerator.org ou css-box-shadow.com?
A maioria das ferramentas dedicadas a box-shadow oferece apenas geração de camada única — o cssgenerator.org, por exemplo, fornece controlos básicos mas sem biblioteca de predefinições e sem empilhamento multi-camada. A referência do css-tricks.com é documentação, não uma ferramenta interativa. Os CSS Generators em cssmatic.com são funcionais mas desatualizados e com muita publicidade. O gerador do UtiloKit suporta até oito camadas independentes com botões de olho por camada, oito predefinições criteriosamente selecionadas cobrindo os padrões de design de sombra mais comuns (cartão, nítida, material, neumórfica, flutuante, profunda, brilho, encovada), três formatos de saída para diferentes frameworks, e alternância total entre fundo escuro e claro para verificação de contraste — tudo sem publicidade e com zero envio de dados.
Esta ferramenta funciona em dispositivos móveis — iPhone e Android?
Sim — o gerador de box-shadow é totalmente responsivo. No iPhone e Android, todos os sliders são amigáveis para toque com alças de arrasto de tamanho adequado. O elemento de pré-visualização adapta-se a ecrãs móveis. Os seletores de cor utilizam o seletor de cor nativo do sistema em browsers móveis. A disposição de três colunas para computador colapsa para uma disposição vertical de coluna única em ecrãs estreitos. Todos os botões de cópia usam a Web Clipboard API, suportada no Safari, Chrome e Firefox tanto no iOS como no Android. Não é necessário descarregar nenhuma aplicação, não precisas de conta — abre o URL e começa a criar.
Related tools
Ver todas as ferramentas
Novo Gerador de cubic-bezier
Desenhe uma curva de easing CSS arrastando pontos de controlo, com pré-visualização ao vivo.
Novo Gerador de border-radius
Crie visualmente cantos arredondados em CSS e formas orgânicas tipo blob.
Novo Playground de Flexbox CSS
Ajuste as propriedades flex com pré-visualização ao vivo e copie o CSS.
Novo Playground de Grid CSS
Ajuste as colunas, o espaçamento e o alinhamento do grid com pré-visualização ao vivo e CSS.
Novo Gerador de glassmorphism
Desenhe um cartão de vidro fosco e copie o CSS, com pré-visualização ao vivo.
Novo Gerador de text-shadow CSS
Ajuste uma sombra de texto CSS com pré-visualização ao vivo e copie o código.