Toolipedia Incorporar
PT
← Todas as ferramentas de texto

Gerador de escala de sombras

Crie um conjunto de sombras combinando (níveis de elevação) como variáveis CSS.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de Gerador de escala de sombras

Os design systems usam um conjunto de níveis de elevação em vez de sombras aleatórias. Esta ferramenta cria valores de box-shadow correspondentes, do pequeno ao grande, com ângulo, crescimento do desfoque e opacidade consistentes, e os gera como propriedades personalizadas do CSS, como --shadow-sm e --shadow-lg, para que cards, menus e modais fiquem coerentes.

Como usar: Gerador de escala de sombras

  1. Escolha uma cor de sombra, a intensidade base e o número de níveis.
  2. Veja a prévia dos níveis de elevação em cartões de exemplo.
  3. Copie as variáveis CSS para a sua folha de estilos.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

Por que usar sombras em camadas em vez de uma só?

Várias sombras suaves empilhadas com desfoque crescente parecem mais naturais do que uma única sombra pesada, porque a luz real produz tanto uma sombra de contato nítida quanto uma sombra ambiente ampla.

De quantos níveis de sombra preciso?

A maioria das interfaces funciona bem com quatro a seis níveis, de pequeno para botões até grande para diálogos. Mais que isso é difícil de as pessoas distinguirem.

Que cor as sombras devem ter?

Um tom escuro semitransparente da cor do seu fundo parece mais natural que o preto puro. Em temas escuros, as sombras ficam menos visíveis, então tente um pouco mais de intensidade.

Gerador de escala de sombras é grátis?

Sim. Gerador de escala de sombras no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar Gerador de escala de sombras no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas