Handytool
DesenvolvedorGrátisRoda localmente

Gerador de box-shadow CSS

Projete valores CSS box-shadow com visualização ao vivo — deslocamentos, desfoque, propagação, opacidade e embutido.

Visualização
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Ajuste os controles deslizantes para projetar a sombra — copie o CSS quando parecer certo.

Sobre Gerador de box-shadow CSS

O gerador de box-shadow do Handytool oferece controles deslizantes para deslocamento, desfoque, propagação, cor e opacidade — e um cartão de visualização ao vivo que se atualiza enquanto você arrasta. Alterne sombras embutidas, escolha uma cor através do seletor e copie a declaração CSS box-shadow resultante diretamente em sua folha de estilos. A ferramenta inteira é executada no seu navegador; nada é carregado.

Recursos de Gerador de box-shadow CSS

  • 01

    Cada parâmetro como um controle deslizante

    Deslocamentos horizontal e vertical, raio de desfoque, raio de propagação e opacidade cada um têm seu próprio controle deslizante mais uma entrada numérica — ajuste fino por arrasto, depois toque no teclado para precisão de pixel.

  • 02

    Sombras embutidas suportadas

    Alterne o comutador embutido para passar de uma sombra suspensa para uma sombra interna — útil para botões pressionados, entradas recuadas e superfícies neumórficas.

  • 03

    Cor + opacidade, separadamente

    Escolha a cor base em qualquer valor hex, depois ajuste a opacidade independentemente. A saída usa rgba() para que cor e alfa permaneçam legíveis quando você copia o CSS.

Perguntas frequentes sobre Gerador de box-shadow CSS

O que o valor de propagação faz?
A propagação positiva aumenta a sombra em todas as direções antes do desfoque ser aplicado; a propagação negativa a encolhe. É útil para brilhos apertados e definidos quando emparelhado com um desfoque pequeno.
Posso adicionar múltiplas sombras?
Este gerador emite uma declaração de sombra única. Para sobrepor sombras, copie o valor, depois cole-o duas vezes em seu CSS separado por uma vírgula — box-shadow aceita uma lista separada por vírgulas.
Por que minha sombra embutida é invisível?
Sombras embutidas são desenhadas dentro do elemento, portanto precisam de uma cor de fundo ou preenchimento para serem visíveis. Eles também não aparecerão em elementos transparentes ou com tamanho zero.
A visualização é precisa em pixels?
Sim — a visualização usa a propriedade CSS box-shadow real em um elemento real, portanto o que você vê é exatamente o que sua folha de estilos renderizará.

Guias

Artigos →

Ferramentas relacionadas

Desenvolvedor →

Explore outras ferramentas

Todas as ferramentas →