Gere um valor box-shadow de CSS

Crie um valor box-shadow de CSS pronto para copiar com base em cinco entradas explícitas, sem montar a sintaxe manualmente. Informe os deslocamentos horizontal e vertical, o raio de desfoque, o raio de expansão e qualquer valor de cor compatível com CSS. O gerador valida os campos numéricos, rejeita valores negativos de desfoque ou expansão e retorna uma sombra formatada de modo consistente com unidades em pixels. Ele é útil em trabalhos interativos de design, pipelines de tokens de design, geradores de componentes e testes que precisam produzir sempre a mesma saída para a mesma entrada.

Defina a posição com os deslocamentos horizontal e vertical

Os dois valores aparecem em pixels CSS no resultado gerado. Um deslocamento horizontal positivo move a sombra para a direita, enquanto um valor negativo a move para a esquerda. Um deslocamento vertical positivo a leva para baixo; um valor negativo, para cima.

O zero mantém a sombra centralizada naquele eixo. Esses campos podem receber valores decimais quando o sistema de design usa espaçamento fracionário, e o gerador preserva o número validado sem arredondamento silencioso. Considere a fonte de luz aparente ao escolher os deslocamentos: uma luz acima e à esquerda normalmente produz uma sombra abaixo e à direita.

Deslocamentos pequenos costumam transmitir proximidade e sutileza, enquanto valores grandes podem fazer o elemento parecer elevado ou intencionalmente gráfico. A ferramenta não deduz a direção com base no desfoque, na cor ou no tipo de componente. Assim, os valores permanecem sob o controle do usuário e podem ser reproduzidos exatamente em folhas de estilo e builds.

Controle a suavidade e a área com desfoque e expansão

O raio de desfoque controla a transição gradual entre a parte mais intensa da sombra e a transparência. O valor zero cria uma borda rígida, enquanto valores maiores formam uma sombra mais suave e visualmente mais ampla. O raio de expansão aumenta a forma da sombra antes da aplicação do desfoque.

Zero acompanha a área original da sombra do elemento, e um valor positivo estende essa área para todos os lados. Digite cada valor como um número simples; o CSS retornado adiciona unidades px na ordem correta. Desfoque e expansão são controles diferentes, portanto aumentar um não substitui o aumento do outro.

Para uma sombra discreta de interface, combine um deslocamento moderado com desfoque médio e pouca ou nenhuma expansão. Para um anel de foco forte ou efeito semelhante a pôster, desfoque zero e expansão maior podem criar um contorno nítido. Visualize o resultado sobre a superfície real, pois a suavidade percebida varia conforme o contraste e as cores ao redor.

Escolha uma cor e aplique o valor gerado

O campo de cor aceita um único valor CSS não vazio, incluindo um nome de cor, uma notação hexadecimal ou uma forma funcional como rgb() ou hsl(). A transparência alfa costuma ser importante para sombras naturais, porque uma cor escura opaca pode parecer pesada em superfícies claras e turva em fundos coloridos. O gerador remove espaços externos desnecessários, verifica o equilíbrio dos parênteses e rejeita caracteres que poderiam quebrar a declaração.

Atribua esse valor à propriedade box-shadow, coloque-o em uma propriedade personalizada ou armazene-o como token de design. A resposta contém um valor, e não uma declaração completa; sua aplicação ainda escolhe o seletor e decide se combinará outras camadas de sombra. O gerador produz uma camada por solicitação.

Para várias sombras, gere e revise cada camada separadamente antes de unir os valores com vírgulas. A execução é determinística e não depende de rede, modelo, aleatoriedade, armazenamento ou relógio, sendo adequada para snapshots e automações de build reproduzíveis.