Gerador de box shadow
Empilhe algumas camadas leves para criar sombras com aparência natural e depois copie o CSS.
Lacrado neste dispositivo
Funciona no seu navegador. Nada é enviado.
Lacrado
Prévia
Camadas de sombra
Ainda não há sombra. Adicione uma camada para começar.
Código CSS
Como funciona
-
Comece por uma predefinição
Escolha uma sombra suave, em camadas, flutuante, nítida ou interna como ponto de partida.
-
Ajuste as camadas
Ajuste o deslocamento, o desfoque, a expansão, a cor e a opacidade de cada camada, e adicione ou remova camadas. A prévia é atualizada enquanto você mexe.
-
Copie o CSS
Copie a declaração box-shadow e cole na sua folha de estilos.
Perguntas frequentes
Para que servem o desfoque e a expansão?
O desfoque (blur) suaviza a borda da sombra: quanto maior o valor, mais difusa ela fica. A expansão (spread) aumenta ou diminui a sombra antes de o desfoque ser aplicado. Uma expansão negativa com um desfoque grande dá aquele efeito suave e elevado comum nas interfaces modernas.
Por que usar várias camadas de sombra?
Sombras reais têm um núcleo escuro e concentrado perto do objeto e um halo suave e amplo mais longe. Empilhar uma camada pequena e nítida com uma ou duas camadas maiores e mais claras reproduz isso e fica muito mais natural do que uma sombra única.
O que é uma sombra inset?
Uma sombra inset é desenhada dentro do elemento, e não fora dele. Ela dá a impressão de uma superfície afundada, o que funciona bem para campos de formulário ou botões pressionados.
A sombra funciona em todos os navegadores?
Sim. O box-shadow, as várias camadas e a sintaxe de cor rgb() usada no código são compatíveis com todos os navegadores atuais.
Um box shadow deixa minha página mais lenta?
Sombras estáticas são leves para desenhar. Desfoques muito grandes em muitos elementos, ou animar a própria sombra, podem pesar mais. Para animar uma sombra com fluidez, faça a transição da opacidade de um pseudo-elemento que carrega a sombra.