Funcionamento da propriedade CSS box-shadow
A propriedade box-shadow do CSS é utilizada para adicionar efeitos de sombra ao redor da moldura de um elemento. O Gerador de Box Shadow permite configurar visualmente esses efeitos por meio de controles deslizantes, gerando o código correspondente em tempo real.
Uma sombra básica é definida por vetores de deslocamento bidimensionais, um fator de suavização e um fator de dimensionamento, além da cor e do canal de transparência. O navegador interpreta esses valores para renderizar uma projeção atrás ou dentro do elemento, alterando a percepção de profundidade na interface.
Parâmetros de deslocamento, desfoque e propagação
Para moldar uma sombra, o gerador expõe quatro controles numéricos principais que determinam a geometria da projeção:
- Deslocamento horizontal: Controla a posição da sombra no eixo X. Valores positivos movem a sombra para a direita, enquanto valores negativos a movem para a esquerda, em um intervalo de -50px a 50px.
- Deslocamento vertical: Controla a posição da sombra no eixo Y. Valores positivos deslocam a sombra para baixo e valores negativos a deslocam para cima, variando de -50px a 50px.
- Desfoque (Blur): Define a nitidez da borda da sombra, variando de 0px (borda totalmente nítida) até 100px (borda amplamente suavizada).
- Propagação (Spread): Altera o tamanho da sombra antes que o desfoque seja aplicado. Valores positivos expandem a sombra para fora, enquanto valores negativos encolhem a sombra para dentro, variando de -50px a 50px.
A cor da sombra é definida por meio de um seletor de cores, e a sua transparência é controlada pelo controle de opacidade, que ajusta a visibilidade do canal alfa da cor projetada.
Sombras externas versus sombras internas (Inset)
Por padrão, a sombra é projetada para fora do elemento, simulando que o componente está elevado acima da superfície do fundo.
Ao ativar a opção Sombra interna (Inset), o comportamento é invertido. A sombra passa a ser renderizada dentro dos limites da borda do elemento, criando um efeito visual de profundidade interna. Essa técnica é frequentemente utilizada para fazer com que um elemento pareça pressionado ou afundado na página, simulando o comportamento físico de campos de entrada de texto ou botões ativos.
Empilhamento de múltiplas camadas de sombra
Sombras realistas raramente são compostas por apenas uma projeção. Na física real, a luz se dispersa em diferentes intensidades e ângulos. O gerador permite simular essa complexidade através do empilhamento de camadas.
O usuário pode interagir com os seguintes controles de estrutura:
- Adicionar camada: Cria uma nova camada de sombra com valores padrão para que possa ser configurada de forma independente.
- Remover camada: Exclui a camada selecionada atualmente.
O gerador inicia com cinco camadas pré-renderizadas. A primeira camada vem configurada por padrão com os valores de deslocamento e desfoque 0 8 24 -4 e uma cor preta com 18% de transparência, enquanto as outras quatro camadas permanecem inicialmente ocultas. Quando múltiplas camadas estão ativas, o código gerado na seção CSS lista todas as sombras declaradas, separadas por vírgulas, em uma única propriedade box-shadow.
Processamento local e privacidade
O funcionamento do Gerador de Box Shadow ocorre inteiramente no lado do cliente. Cada sombra configurada é renderizada diretamente no seu navegador de internet. Nenhuma das informações de cores, dimensões ou configurações que você define aqui é enviada para o BroBroGo.
Perguntas Frequentes
O que o deslocamento, o desfoque e a propagação realmente controlam?
O deslocamento (offset) move a sombra para os lados e para cima/baixo, o desfoque (blur) suaviza as bordas e a propagação (spread) aumenta ou diminui a sombra antes de desfocar. Um spread negativo encolhe a sombra, útil para um efeito mais sutil e próximo.
O que faz a opção inset?
Uma sombra normal fica do lado de fora do elemento, como a luz atrás de um cartão elevado. O Inset inverte a sombra para dentro, fazendo o elemento parecer afundado — ideal para campos de entrada ou botões pressionados.
Por que empilhar mais de uma camada de sombra?
Uma única sombra parece artificial a partir de certo tamanho. A elevação real geralmente combina uma sombra escura e fechada com outra suave e mais ampla — adicione uma segunda camada e ajuste cada uma de forma independente para obter esse efeito.