Gerador de box-shadow CSS
Cria sombras box-shadow de CSS visualmente com pré-visualização em direto e código pronto a copiar, tudo no teu navegador.
A carregar Gerador de box-shadow CSS… Se nada acontecer, ativa o JavaScript.
A propriedade box-shadow do CSS pinta uma sombra à volta da moldura de um elemento, e é uma das ferramentas mais importantes para dar a uma interface web plana uma sensação de profundidade e hierarquia. Uma sombra bem doseada diz ao utilizador que um cartão está acima da página, que um botão é pressionável, que um menu suspenso flutua sobre o conteúdo por baixo. A propriedade é enganadoramente rica: uma única declaração controla um deslocamento horizontal, um deslocamento vertical, um raio de desfoque, um raio de expansão, uma cor e se a sombra cai fora do elemento ou é talhada dentro dele como um inset. Conseguir que esses valores pareçam naturais editando números às cegas é lento, que é exatamente a razão pela qual um gerador visual ajuda.
Perguntas frequentes
É carregado alguma coisa quando crio uma sombra?
O que controla cada valor de box-shadow?
Qual é a diferença entre desfoque e expansão?
O que faz a opção inset?
Porque é que a cor gerada usa rgba em vez de um valor hexadecimal?
Posso criar várias sombras empilhadas?
Estas sombras funcionam em todos os navegadores?
Como faço uma sombra suave e realista em vez de uma dura?
Sobre Gerador de box-shadow CSS
Este gerador dá-te uma caixa de pré-visualização em direto e um cursor para cada parâmetro para que vejas o efeito de cada alteração instantaneamente. Os valores de deslocamento movem a sombra para a esquerda, direita, cima ou baixo para sugerir uma fonte de luz. O raio de desfoque suaviza a aresta, com zero a produzir uma sombra de aresta dura e valores maiores um brilho difuso. O raio de expansão aumenta ou encolhe a sombra antes de o desfoque ser aplicado, o que é útil para apertar ou alargar a pegada. Um seletor de cor e um cursor de opacidade combinam-se na cor final da sombra, e uma caixa de inset alterna entre uma sombra exterior e uma sombra interior que faz um elemento parecer pressionado ou recuado.
À medida que ajustas os controlos, a ferramenta escreve a declaração box-shadow exata em CSS padrão e sem prefixos de fornecedor, pronta a copiar para a tua área de transferência com um clique. A saída usa uma cor rgba para que a opacidade fique incorporada corretamente, que é como as sombras do mundo real são quase sempre escritas, já que o preto puro em plena intensidade parece pesado e artificial. A pré-visualização assenta sobre um tabuleiro de xadrez para que possas avaliar com precisão as sombras suaves e semitransparentes em vez de contra uma única cor plana.
Tudo corre localmente no teu navegador, sem carregamentos, sem conta e sem rastreio, e continua a funcionar offline depois de a página carregar. Não há nada para enviar para lado nenhum porque todo o trabalho consiste em gerar uma cadeia curta de CSS. O resultado é uma forma rápida e tátil de afinar a elevação precisa de que um componente precisa e de copiar código pronto para produção sem memorizar a ordem dos valores de box-shadow nem afinar à mão o alfa do rgba por tentativa e erro.
Como as sombras chegaram, foram-se e voltaram ao design web
Antes do CSS3, pôr uma sombra numa caixa significava imagens. Os designers exportavam as arestas da sombra como fatias PNG e montavam-nas à volta de um elemento com divs de invólucro extra, uma técnica frágil que se quebrava sempre que a caixa mudava de tamanho e acrescentava vários pedidos HTTP por componente. A propriedade box-shadow, padronizada como parte do módulo CSS Backgrounds and Borders, chegou com prefixos de fornecedor por volta de 2009 sob a forma de -webkit-box-shadow e -moz-box-shadow, e alcançar todos os navegadores levou mais alguns anos até o Internet Explorer 9 acrescentar suporte.
Assim que as sombras nativas ficaram disponíveis, a web atravessou uma fase fortemente sombreada. O design esqueuomórfico, que atingiu o seu pico no início da década de 2010 e foi personificado pelas interfaces de iOS da Apple dessa época, apoiou-se com força em sombras, gradientes e biséis para fazer os elementos no ecrã imitarem objetos físicos: botões que pareciam talhados em vidro, painéis com couro costurado, interruptores com sombras profundas. A propriedade box-shadow foi central nesse aspeto, muitas vezes empilhada em várias camadas sobre um único elemento.
Depois o pêndulo oscilou. O design plano, popularizado pela linguagem Metro da Microsoft e pela própria redesenhação do iOS 7 da Apple em 2013, despiu as sombras quase por completo a favor da cor sólida e da tipografia limpa. Mas a planura pura tornava difícil saber o que era clicável, por isso surgiu um caminho intermédio. O Material Design da Google reformulou as sombras não como decoração mas como um sistema de elevação, onde o tamanho e a suavidade de uma sombra comunicam o quanto um elemento flutua acima da superfície por baixo. Essa ideia continua a ser a convenção dominante hoje, que é a razão pela qual pensar nas sombras em termos de elevação, em vez de apenas de escuridão, produz interfaces que parecem coerentes e intuitivas.