Gerador de CSS box-shadow (sombra)

Ajuste sombras visualmente e copie o código CSS instantaneamente

Ajuste intuitivamente deslocamento horizontal, deslocamento vertical, desfoque, espalhamento, cor e opacidade do box-shadow com controles deslizantes. Refine a sombra em tempo real enquanto visualiza a prévia, e obtenha facilmente designs complexos como neumorfismo. Copie o código CSS finalizado com um único clique.

Prévia

Propriedades da sombra

Deslocamento horizontal (X) 0px

Deslocamento vertical (Y) 4px

Desfoque 12px

Espalhamento 0px

Cor Opacidade

Sombra interna (inset)

Predefinições

Suave

Média

Forte

Neumorfismo

Como usar

Usar o gerador de box-shadow CSS é simples:

Passo 1: Ajuste a sombra com controles deslizantes

Ajuste cada parâmetro de deslocamento horizontal, deslocamento vertical, desfoque e espalhamento com controles deslizantes. As alterações são refletidas em tempo real na prévia.

Passo 2: Defina cor e opacidade

Escolha a cor da sombra com o seletor de cores e ajuste finamente a opacidade (0.0-1.0) com entrada numérica. Marque Inset para criar uma sombra interna.

Passo 3: Copie o código CSS

Ajuste enquanto verifica a prévia, e quando terminar pode copiar o código CSS com um único clique.

Esta ferramenta funciona completamente no navegador, e todo o processamento é realizado no seu dispositivo. Os dados não são enviados externamente.

Exemplos práticos

O gerador de box-shadow CSS pode ser usado nos seguintes cenários:

1. Criar efeito 3D em UI de cartões

Adicione sombra suave a cartões de artigos de blog ou cartões de produtos para criar a sensação de elevação da tela. Guia a atenção dos usuários e melhora a taxa de cliques.

2. Efeito de foco em botões

Reforçar a sombra quando o cursor do mouse está sobre um botão transmite visualmente que é um elemento clicável. Melhora diretamente a usabilidade.

3. Separação de fundo em janelas modais

Aplique sombra escura à janela modal para separá-la claramente do conteúdo de fundo. Permite concentrar a atenção do usuário em uma ação específica.

4. Design neumórfico

Obtenha design neumórfico (New Skeuomorphism) combinando várias sombras. Construa interfaces sofisticadas que integram as últimas tendências de UI.

5. Exibir foco em campos de formulário

Aplicar sombra interna (inset) ao elemento input durante o foco destaca visualmente o campo atualmente em entrada. Melhora a usabilidade de formulários.

6. Cabeçalho fixo em barra de navegação

Adicione sombra ao cabeçalho que se fixa ao rolar para esclarecer o limite entre conteúdo e cabeçalho. Combina legibilidade e design.

O que é CSS box-shadow

box-shadow é uma propriedade CSS que adiciona sombra a elementos HTML. Tecnologia essencial no design web que permite expressar profundidade e 3D com apenas código CSS sem imagens.

Parâmetros do box-shadow

box-shadow é especificado na ordem 'deslocamento horizontal deslocamento vertical desfoque espalhamento cor'. Deslocamento horizontal e vertical são a posição da sombra, desfoque é o grau de desfoque da borda, espalhamento é o tamanho da sombra, e a cor pode ser especificada com RGBA incluindo opacidade.

inset (sombra interna)

Ao adicionar a palavra-chave inset, a sombra é desenhada dentro do elemento em vez de fora. Adequado para expressar depressão em campos de formulário ou estado pressionado de botões.

Camadas de múltiplas sombras

Vários box-shadow podem ser especificados separados por vírgulas para sobrepor sombras. No design neumórfico, sombras claras e escuras são combinadas para criar textura tridimensional.

Perguntas frequentes

O gerador de box-shadow CSS é gratuito?

Sim, é completamente gratuito para usar. Não é necessário registo, e funciona no navegador para que possa começar a usar imediatamente.

Qual é a diferença entre desfoque (blur) e espalhamento (spread)?

Desfoque especifica quanto desfocar a borda da sombra, e espalhamento especifica quanto expandir ou reduzir o tamanho da sombra. Desfoque 0 e espalhamento 10 criam uma sombra grande e nítida.

O que é neumorfismo?

Neumorfismo (Neumorphism) é um método de design que combina sombras claras e escuras para fazer os elementos parecerem sobressair ou estar deprimidos da tela. Dá uma impressão moderna e sofisticada.

Quando devo usar inset (sombra interna)?

Use quando quiser expressar que um elemento está deprimido, como em campos de entrada de elemento input ou estado pressionado de botões. A combinação com sombra normal (externa) permite expressão mais tridimensional.

Qual é o impacto do box-shadow no desempenho?

box-shadow é uma propriedade CSS relativamente leve, mas grande desfoque ou camadas de várias sombras podem causar sobrecarga na renderização. É necessária atenção especial em smartphones.

Pode ser usado em todos os navegadores?

box-shadow é suportado em todos os principais navegadores incluindo IE9 e posterior, Chrome, Firefox, Safari e Edge. Em navegadores mais antigos, pode ser necessário prefixo de fornecedor (-webkit-box-shadow).

É melhor usar RGB ou RGBA para cor de sombra?

RGBA é recomendado porque permite ajuste de opacidade. Geralmente, opacidade de sombra de cerca de 0.1-0.3 é natural e se integra bem ao fundo.

O código CSS gerado pode ser usado como está?

Sim, o código gerado pode ser copiado e colado diretamente no arquivo CSS para uso. Está escrito como propriedade box-shadow e pode ser aplicado imediatamente.