Gerador de box-shadow CSS

A propriedade CSS `box-shadow` adiciona um ou mais efeitos de sombra a um elemento HTML. Cada sombra é definida por até seis valores: a palavra-chave opcional `inset`, um deslocamento horizontal, um deslocamento vertical, um raio de desfoque, um raio de espalhamento e uma cor. Deslocamentos horizontais positivos empurram a sombra para a direita; deslocamentos verticais positivos empurram para baixo. Múltiplas sombras são separadas por vírgulas e renderizadas da frente para trás. É o principal mecanismo CSS para adicionar profundidade visual, hierarquia de elevação, efeitos de brilho e estilo neumórfico a componentes de UI sem nenhuma imagem.

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` assume sombra externa por padrão. Uma sombra típica de card fica assim: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Empilhe sombras ilimitadas separando-as com vírgulas — elas são renderizadas da frente para trás (a primeira listada fica no topo). Este gerador produz a declaração completa incluindo o nome da propriedade `box-shadow:`, ou apenas o valor se você preferir.

O blur-radius controla a suavidade da borda: zero dá uma borda nítida e precisa que corresponde exatamente ao formato do elemento; valores maiores criam um degradê progressivamente mais suave e difuso. O spread-radius expande ou encolhe toda a sombra antes do desfoque ser aplicado: valores positivos expandem além da borda do elemento, valores negativos a contraem para dentro. As sombras com aparência mais realista usam um desfoque moderado com um espalhamento levemente negativo, mantendo a sombra próxima à área natural do elemento em vez de se espalhar demais. Essa é a técnica usada nos presets Deep e Floating.

Adicione a palavra-chave `inset` no início da declaração da sombra: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Uma sombra inset é desenhada dentro da caixa de borda do elemento em vez de atrás dele, criando uma aparência recuada ou pressionada. Usos comuns incluem: campos de input (mostrando profundidade de foco), trilhas de toggle switch, estados ativos de botões tipo push e contêineres de texto em relevo. Este gerador tem um toggle Inset no painel de controle de cada camada — ative-o e a sombra imediatamente inverte dentro do elemento de prévia.

Sim — o CSS permite qualquer número de sombras separadas por vírgulas em um único elemento. Elas são renderizadas na ordem listada, com a primeira sombra no topo. Empilhar múltiplas camadas é a técnica essencial para profundidade suave e realista — uma única sombra grande parece artificial, enquanto três a cinco camadas graduadas imitam como a luz se dispersa fisicamente. Este gerador suporta até oito camadas independentes, cada uma com seu próprio deslocamento, desfoque, espalhamento, cor, opacidade e toggle inset. Um ícone de olho permite mostrar/ocultar camadas individuais para comparação rápida antes/depois sem excluí-las.

O neumorfismo usa duas sombras opostas em um elemento cuja cor de fundo corresponde à página: uma sombra clara (próxima ao branco) apontando para o canto superior esquerdo e uma escura (preto com baixa opacidade) apontando para o canto inferior direito. Isso faz o elemento parecer extrudado 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. O preset Neumorphic deste gerador oferece um ponto de partida pronto — mude o fundo da prévia para 'Cinza suave' para vê-lo em contexto.

Use deslocamento zero, um grande raio de desfoque e um valor colorido: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. O deslocamento zero faz o brilho irradiar igualmente em todas as direções. Um espalhamento positivo 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 grande e menor opacidade para o halo ambiente — produz um efeito luminoso mais convincente. O preset Glow Blue demonstra isso com uma abordagem de duas camadas. Mude a cor para qualquer tom para criar brilhos de destaque personalizados.

Em vez de uma única sombra grande, empilhe de três a cinco camadas onde cada uma aproximadamente dobra o deslocamento e o desfoque enquanto reduz a opacidade pela 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)`. Essa técnica imita como a luz se dispersa fisicamente a partir de uma fonte pontual e permanece convincente em qualquer nível de zoom ou resolução de tela. Os presets Deep e Floating deste gerador são construídos exatamente nesse princípio — três camadas graduadas que parecem naturais em qualquer escala.

`box-shadow` sempre segue a caixa de borda retangular do elemento, independentemente de como o elemento parece visualmente. `filter: drop-shadow()` rastreia o contorno do canal alfa real do elemento — útil para recortes PNG transparentes ou ícones SVG onde você quer que a sombra siga o formato em vez do retângulo delimitador. Para componentes de UI padrão (cards, botões, painéis, diálogos), `box-shadow` é o correto: é mais rápido de renderizar, suporta modo inset, aceita raio de espalhamento e permite múltiplas camadas empilhadas. Use `filter: drop-shadow()` apenas quando o fundo transparente do elemento importar para o formato da sombra.

Não. `box-shadow` é puramente um efeito visual renderizado fora do fluxo normal de layout. Ele nunca empurra elementos irmãos, nunca aumenta a área de conteúdo rolável e não tem efeito na largura, altura, margem ou padding computados do elemento. As sombras se estendem visualmente além da caixa do elemento, mas são ignoradas pelo mecanismo de layout. Isso significa que você pode adicionar sombras generosas a um grid compacto sem quebrar o layout — embora você queira adicionar `overflow: visible` no contêiner pai para garantir que a sombra não seja cortada.

Depois de construir sua sombra, o gerador oferece três formatos de saída. <strong>Copiar CSS</strong> fornece a declaração completa da propriedade (`box-shadow: …;`) pronta para qualquer folha de estilo. <strong>Copiar valor</strong> fornece apenas o valor da sombra — útil como variável SCSS, valor de propriedade customizada CSS ou entrada de `extend.boxShadow` no Tailwind. <strong>Estilo React</strong> produz o formato camelCase (`boxShadow: '…'`) para objetos de estilo inline em JSX ou Styled Components. Para o Tailwind, cole o valor no seu `tailwind.config.js` em `theme.extend.boxShadow` para criar uma classe utilitária de sombra personalizada.

A maioria das ferramentas dedicadas de box-shadow oferece geração de camada única apenas — cssgenerator.org, por exemplo, oferece controles básicos mas sem biblioteca de presets e sem empilhamento de múltiplas camadas. A referência do css-tricks.com é documentação, não uma ferramenta interativa. Os CSS Generators do cssmatic.com são funcionais, mas desatualizados e com muitos anúncios. O gerador do UtiloKit suporta até oito camadas independentes com toggles de olho por camada, oito presets cuidadosamente selecionados cobrindo os padrões de design de sombra mais comuns (card, crisp, material, neumórfico, floating, deep, glow, inset well), três formatos de saída para diferentes frameworks e um toggle completo de fundo claro/escuro para verificação de contraste — tudo grátis, sem upload de dados.

Sim — o gerador de box-shadow é totalmente responsivo. No iPhone e Android, todos os sliders são otimizados para toque com alças de arraste de tamanho adequado. O elemento de prévia ao vivo se adapta para caber em telas de celular. Os seletores de cor usam o seletor de cor nativo do sistema nos navegadores móveis. O layout de três colunas do desktop colapsa para um layout vertical limpo de coluna única em telas estreitas. Todos os botões de cópia usam a Web Clipboard API, suportada no Safari, Chrome e Firefox tanto no iOS quanto no Android. Não é necessário baixar nenhum app, não precisa de conta — abra a URL e comece a criar.