◻ Um kit de ferramentas,
cada tarefa de design

Gerador de Sombras

Construtor de sombra de caixa interativo com várias camadas, visualização do Canvas em tempo real e saída CSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

◻ Gerador de Sombras

Guia de sombra de caixa

As sombras da caixa adicionam profundidade aos elementos da IU, simulando iluminação e elevação. Sombras bem projetadas criam hierarquia visual e tornam as interfaces mais táteis.

Ajuste o deslocamento horizontal, deslocamento vertical, desfoque, propagação, cor e opacidade. A visualização do Canvas é atualizada em tempo real. Copie o código CSS quando estiver satisfeito.

Pro Tips

Frequently Asked Questions

Q: Qual é a diferença entre desfoque e propagação?
Qual é a diferença entre desfoque e propagação? O desfoque controla o quão suave é a borda da sombra. Spread controla o quanto a sombra se expande.
Q: Quantas camadas de sombra devo usar?
Quantas camadas de sombra devo usar? 1-2 camadas geralmente são suficientes. Use sombras inseridas para profundidade interna.
Q: Quantas camadas de sombra de caixa devo usar?
Quantas camadas de sombra de caixa devo usar? Projetos profissionais geralmente usam de 2 a 4 camadas para profundidade. Comece com uma sombra pequena e compacta, adicione uma sombra média e, opcionalmente, adicione uma sombra ambiente grande. A ferramenta oferece suporte a camadas ilimitadas.
Q: Qual é o impacto no desempenho do box-shadow?
Qual é o impacto no desempenho do box-shadow? Algumas sombras de caixa têm impacto insignificante. Muitas sombras com muito desfoque podem afetar o desempenho da rolagem em dispositivos de baixo custo. A ferramenta mostra uma visualização em tempo real para que você possa avaliar antes de copiar.
Q: Posso criar sombras internas (inserção)?
Posso criar sombras internas (inserção)? A versão atual concentra-se nas sombras externas. Para sombras internas, adicione manualmente a palavra-chave "inset" ao início do valor CSS box-shadow gerado.

Cores do Brasil

Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.

Verde Bandeira #009C3B

O verde da bandeira nacional, símbolo das matas

Amarelo Bandeira #FFDF00

O ouro do losango da bandeira brasileira

Azul Bandeira #002776

O azul do círculo e das estrelas

Azul Azulejo #1E5FA8

Herança dos azulejos portugueses em igrejas e casarões

Rosa Choque #FF1493

A energia vibrante do carnaval e das marcas jovens

Verde Amazônia #228B22

A floresta tropical, pulmão do planeta

Amarelo Ouro #FFD700

O ouro do barroco mineiro de Ouro Preto

Terracota Nordestina #CD5C5C

A argila do sertão e do artesanato nordestino

Anil #4B0082

Cor do vestido tradicional das baianas

Branco Areia #EDE4D3

As praias de areia clara do litoral

Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.