Gere sombras CSS com pré-visualização ao vivo. Adicione múltiplas camadas de sombra para profundidade e realismo.
Arrasta os controlos para ajustar o deslocamento horizontal, vertical, o raio de desfoque, a expansão, a cor e a opacidade de uma sombra CSS. Marca Inset para um efeito de sombra interior. A pré-visualização atualiza em tempo real.
Usa os controlos para ajustar cada parâmetro de sombra. Marca Inset para uma sombra interior. Clica na amostra de cor para a alterar. O CSS gerado atualiza em tempo real no bloco de código escuro — clica em Copiar para obtê-lo.
A expansão expande (valor positivo) ou contrai (valor negativo) a sombra antes de aplicar o desfoque. Uma expansão positiva torna a sombra maior que o elemento; negativa torna-a menor.
O CSS suporta múltiplos box-shadows como lista separada por vírgulas. Gera cada sombra aqui separadamente e combina-as manualmente: box-shadow: sombra1, sombra2;
Esta ferramenta funciona inteiramente no seu navegador. Nada do que escreve ou cola é enviado para qualquer servidor — todo o processamento ocorre localmente no seu dispositivo.