Ferramentas · CSS
Gerador de sombra CSS (box-shadow)
Ajuste deslocamento, desfoque, espalhamento, cor e opacidade de até três camadas de sombra, veja o resultado e copie o box-shadow pronto.
Prévia
Camada 1
Camada 2
Camada 3
A primeira camada ativa fica por cima das outras. A prévia usa o seu navegador; o resultado pode variar levemente entre navegadores.
Como funciona
- Cada camada vira cinco valores na ordem do CSS: deslocamento horizontal, vertical, desfoque, espalhamento e cor, com a palavra inset na frente quando a sombra é interna.
- A cor é escolhida em hexadecimal e convertida para rgba, usando a opacidade que você informar de 0 a 100%.
- Camadas são separadas por vírgula e a primeira fica por cima; várias sombras suaves costumam parecer mais naturais que uma sombra só e forte.
- O desfoque não aceita valor negativo, e os valores em pixels ficam limitados a 1000 para evitar erro de digitação.
- A prévia é desenhada pelo seu navegador e nada é enviado a servidor.
Ferramentas relacionadas
Gerador de user stories
Monta a história de usuário e os critérios de aceite Dado/Quando/Então, com avisos sobre histórias grandes demais.
Gerador de UUID v4
Gere e valide UUIDs v4 com segurança criptográfica, personalizando formato e caso das letras.
Gerar hash SHA-256
Converte texto em hash SHA-256 hexadecimal com opção de maiúsculas/minúsculas e comparação com valor esperado — tudo localmente no seu navegador.