Gerador de CSS box-shadow
Arraste os controles deslizantes e copie o CSS.
- Executa no seu navegador — seu texto nunca é enviado a lugar nenhum
- Sem cadastro, sem cotas, grátis para usar quantas vezes quiser
Como funciona
O box-shadow recebe quatro números e uma cor em uma ordem específica, e a diferença entre uma sombra que dá a ideia de profundidade e uma que parece um adesivo está inteiramente nesses números. Ver a mudança enquanto você arrasta é muito mais rápido do que adivinhar.
O que significam os quatro números
Em ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque e expansão (spread). Os deslocamentos movem a sombra; o desfoque suaviza sua borda; a expansão a aumenta ou diminui antes do desfoque. Uma expansão negativa puxa a sombra para dentro, que é como você consegue uma sombra justa sob um card sem que vaze pelas laterais.
Fazendo parecer real
A luz geralmente vem de cima, então um pequeno deslocamento vertical positivo, sem deslocamento horizontal, parece natural. Sombras grandes e muito transparentes passam a ideia de profundidade suave; sombras pequenas, escuras e nítidas parecem um adesivo recortado. Objetos reais projetam sombras mais desfocadas quanto mais longe estão da superfície — um desfoque maior sugere um elemento mais alto.
Sombras internas
Uma sombra interna é desenhada dentro do elemento, e não fora, que é como se fazem botões pressionados, campos de entrada e painéis embutidos. Valem os mesmos quatro números, só que apontando para dentro.
Várias sombras ao mesmo tempo
O CSS aceita uma lista separada por vírgulas, e sobrepor duas — uma justa e escura, outra ampla e suave — fica consideravelmente melhor do que uma só. Este gerador produz uma; cole duas juntas por conta própria para obter o efeito em camadas.
Gerador de CSS box-shadow — perguntas
Em que ordem estão os valores?
Deslocamento horizontal, deslocamento vertical, desfoque, expansão e depois a cor.
O que uma expansão negativa faz?
Ela encolhe a sombra antes do desfoque, o que a mantém justa sob o elemento em vez de vazar pelas laterais.
O que é uma sombra interna (inset)?
Uma sombra desenhada dentro do elemento, e não fora — usada em botões pressionados e campos de entrada.
Posso criar uma sombra em camadas?
Não diretamente. O CSS aceita uma lista separada por vírgulas, então gere duas e cole-as juntas.