Gerador de box-shadow

O design system pediu uma sombra suave no card e o Figma está no outro notebook. Esta aba devolve a linha de CSS — fundo em degradê e a conta AA do texto são irmãos, não este snippet.

O card do pricing precisa “flutuar” dois pixels e ninguém quer abrir o Figma no meio da daily. O trabalho desta página é o snippet box-shadow nesta aba: deslocamento, blur, spread e cor. Não pinta PNG. Não é o degradê do hero.

Times de front no Brasil colam isso no Slack mais do que no Figma Inspect. O recorte honesto: CSS clássico, sem token do design system e sem mesh.

Card, botão e o que o Outlook recusa

• Sombra de card, modal ou botão em site estático.
• Ajuste rápido de rgba depois de amostrar o cinza no conta-gotas.
• Prototipar antes de promover o valor a token.

É a ferramenta errada para newsletter antiga, para fundo de PDF e para “a marca em PNG com sombra baked”. E-mail de campanha no Outlook costuma ignorar a propriedade — aí o bitmap ganha.

Exemplo para colar:

box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);

px, rem e o contraste do texto

1. Ajuste X, Y, blur e spread. Várias camadas: some com vírgula, se a interface deixar.
2. Se o stylesheet do time é rem, passe os números em unidades CSS. Raiz 16 px: 10px → 0,625rem. Truque html { font-size: 62,5%; } (10 px): 10px → 1rem.
3. Texto em cima: a sombra não salva um cinza em cinza. Meça no contraste.

Paleta da marca: gerador de paletas. Isto não calibra gráfica nem Pantone.

O que não sai daqui

Não exporta PNG. Não aplica a sombra num currículo em PDF. Não é acessibilidade completa — eMAG e teclado são outro processo. Nada é enviado; o job é a linha, não um arquivo de marca.