Sobre o Gerador de sombra de caixa CSS
Construa elevações realistas em vez de adivinhar valores. Ajuste o deslocamento horizontal e vertical, desfoque, propagação, cor e opacidade, empilhe várias camadas para obter profundidade e copie a regra CSS exata.
Como usar
- 1Defina os deslocamentos e desfoqueArraste os controles deslizantes ou digite os valores exatos dos pixels; o cartão de visualização é atualizado imediatamente.
- 2Escolha a cor e a opacidadeUse o seletor de cores e o controle deslizante alfa para combinar com sua paleta, incluindo sombras no modo escuro.
- 3Copie o CSSAdicione mais camadas se precisar de uma sombra mais suave e natural e copie a declaração box-shadow.
Por que usar este gerador de sombra de caixa css?
- Nada sai do seu dispositivo. O trabalho acontece na aba do seu navegador. Não há ponto de extremidade de upload neste aplicativo, portanto, seus arquivos e texto não podem ser armazenados, registrados ou vistos por nós.
- Sem upload, aguarde. Você pula totalmente a viagem de ida e volta para um servidor. Os resultados são limitados pela sua própria CPU, não pela velocidade da rede ou pelo tamanho da fila.
- Gratuito, sem conta, sem cotas. Sem parede de inscrição, sem marca d'água, sem limite diário. Existem contas opcionais apenas para salvar favoritos e predefinições em dispositivos.
Perguntas frequentes
Meu design é seguro para uso aqui?
Sim. Esta ferramenta funciona inteiramente no seu navegador usando JavaScript. Nada que você cola ou abre é enviado para um servidor, e a página não mantém nenhuma cópia depois de fechá-la.
Preciso criar uma conta?
Não. Todas as ferramentas podem ser totalmente utilizadas sem login. Uma conta apenas adiciona favoritos salvos e predefinições reutilizáveis.
Funciona em um telefone?
Sim. A interface prioriza os dispositivos móveis, com grandes alvos de toque e um layout empilhado, por isso funciona em telefones e tablets, bem como em desktops.
Como faço uma sombra com aparência natural?
Use uma dispersão negativa pequena, um desfoque grande e baixa opacidade, com deslocamento mais para baixo do que para os lados. Empilhar duas ou três camadas de baixa opacidade geralmente fica melhor do que uma sombra pesada.
Por que minha sombra parece cortada?
O elemento pai provavelmente tem overflow oculto ou a sombra é mais larga que o preenchimento ao redor. Adicione margem ou preenchimento ao redor do elemento para que o desfoque tenha espaço para renderização.