Sobre esta ferramenta
A propriedade CSS box-shadow desenha uma ou mais sombras ao redor da moldura de um elemento. Cada sombra é um conjunto de valores: uma palavra-chave inset opcional, deslocamentos horizontal e vertical, um raio de desfoque, um raio de espalhamento e uma cor. Várias sombras são separadas por vírgulas e pintadas de trás para frente, de modo que a primeira da lista fica por cima. Sobrepor várias sombras de baixa opacidade é como se constrói uma elevação realista, uma luz ambiente suave e brilhos internos — uma única sombra raramente parece natural.
Use-o para criar a elevação de cartões e janelas modais, ajustar efeitos de anel de foco e brilho interno, recriar uma profundidade no estilo Material com camadas empilhadas, ou prototipar rapidamente um estado de hover antes de confirmá-lo na sua folha de estilo. Escolha um predefinido para começar, ajuste os controles deslizantes de cada camada, ative inset para sombras rebaixadas e cole a regra gerada diretamente no seu CSS ou em um valor arbitrário do Tailwind.
As cores são emitidas como rgba() para que o controle deslizante de opacidade corresponda diretamente ao canal alfa — o hex subjacente permanece intacto, o que mantém o valor fácil de ajustar manualmente depois.
Perguntas frequentes
Como crio uma box-shadow em camadas (multicamadas)?
Forneça várias definições de sombra separadas por vírgulas em uma única declaração box-shadow. Cada camada é renderizada de forma independente e se empilha de trás para frente, com a primeira sombra listada desenhada por cima; combinar algumas camadas de baixa opacidade produz uma profundidade mais suave e mais realista do que uma única sombra.
Qual é a diferença entre desfoque e espalhamento em box-shadow?
O desfoque é o quarto valor e controla quão suave é a borda da sombra — valores mais altos a esfumaçam mais. O espalhamento é o quinto valor, opcional, e aumenta (positivo) ou reduz (negativo) o tamanho da sombra antes que o desfoque seja aplicado, de modo que um espalhamento negativo aperta a sombra contra o elemento.
O que a palavra-chave inset faz em box-shadow?
Adicionar inset desenha a sombra dentro da caixa do elemento, em vez de fora dela, criando um efeito rebaixado ou de brilho interno. Sem inset, a sombra é pintada para fora como uma sombra projetada comum.