Gerador de box-shadow CSS

Criar e copiar uma sombra

1. Edite o deslocamento horizontal e vertical, desfoque, expansão, cor e opacidade de cada camada. Escolha sombra interna quando esta deve aparecer dentro da caixa.
2. Adicione, duplique ou mova camadas para ajustar o resultado. Mantenha 1–8 camadas; um campo incompleto ou fora dos limites do editor limpa o código atual até ser corrigido.
3. Analise a pré-visualização em Ajustar ou a 100% e copie a declaração. Cole-a numa regra CSS do elemento que pretende estilizar.

Compreender cada camada

Deslocamentos horizontais e verticais positivos movem a sombra para a direita e para baixo. O desfoque suaviza a margem; com desfoque zero, a margem fica nítida. A expansão altera o tamanho, não a suavidade.

A opacidade pertence à cor de cada sombra, não à caixa inteira. Uma sombra com 50 por cento mantém exatamente 50 por cento no código; a sua cor não é convertida num byte alfa arredondado.

A primeira camada fica à frente na sua categoria de pintura. As sombras externas permanecem atrás do fundo da caixa, enquanto as internas ficam acima desse fundo e abaixo da borda. Mover linhas não permite cruzar essas categorias.

Os comprimentos aceitam ponto ou vírgula e até duas casas decimais; a opacidade aceita uma. Estes controlos do editor têm limites e não analisam todas as expressões CSS válidas. O código gerado usa sempre ponto decimal.

Experiências úteis com sombras

O exemplo inicial combina uma pequena sombra suave com 0, 2, 4, 0 píxeis e 12.5 por cento de opacidade com uma sombra mais ampla de 0, 8, 16, -4 píxeis e 20 por cento. Cada linha corresponde a uma entrada no código.

Para um efeito semelhante a um contorno nítido, use deslocamentos e desfoque zero e expansão positiva numa camada externa. Continua a ser uma sombra, não uma propriedade de borda exportada.

Experimente uma camada interna com desfoque zero e deslocamento positivo para observar a sua margem interna nítida. Altere a cor da superfície e use a vista a 100% sem alterar a declaração da sombra.

Saiba o que a pré-visualização mostra

Este editor produz 1–8 camadas box-shadow em sRGB e píxeis CSS. Não importa CSS, não gera sombras de filtro drop-shadow, não escolhe um seletor nem exporta uma folha de estilos completa ou imagem.

O tamanho da caixa, as cores opacas e o raio dos cantos na pré-visualização servem apenas de contexto. A geometria e o fundo do seu elemento podem alterar o aspeto da mesma declaração.

Ajustar dimensiona toda a pré-visualização. Use a vista de 100% com deslocamento para observar melhor. O espaço é limitado e pode cortar as extremidades desfocadas; navegadores e ecrãs podem não pintar píxeis idênticos.

Uma sombra transparente ou reduzida a nada pode ser válida, mas invisível. Se o navegador não conseguir pré-visualizar a declaração atual, a ferramenta avisa em vez de substituir o efeito; o código válido continua disponível para copiar.

A sombra permanece na página

A edição da sombra e a geração do código decorrem localmente, sem enviar nem guardar os seus valores. A cópia ocorre apenas quando a escolhe. A política geral de privacidade do site continua a aplicar-se.