Gerador de Box Shadow CSS
Gerador online gratuito de box-shadow CSS. Crie sombras bonitas visualmente com deslocamento, desfoque, expansão, cor e inserção ajustáveis. Visualização ao vivo e cópia instantânea.
O que é CSS box-shadow?
CSS box-shadow é uma propriedade CSS que adiciona efeitos de sombra ao redor do quadro de um elemento. Permite criar sombras projetadas, sombras internas e múltiplas camadas de sombra especificando deslocamento, raio de desfoque, raio de expansão e valores de cor.
Quais são os parâmetros do box-shadow?
A propriedade box-shadow aceita vários valores: deslocamento horizontal (X), deslocamento vertical (Y), raio de desfoque, raio de expansão, cor e a palavra-chave opcional inset. Você também pode especificar múltiplas sombras separadas por vírgulas.
O que é a palavra-chave inset?
A palavra-chave inset muda a sombra de uma sombra externa (sombra projetada) para uma sombra interna. Quando inset é especificado, a sombra é desenhada dentro da borda do elemento em vez de fora, criando um efeito de inserção.
O que é raio de desfoque?
O raio de desfoque determina o quanto a borda da sombra é desfocada. Um valor de 0 cria uma borda nítida e sólida. Valores maiores criam uma sombra mais difusa e suave que se estende mais longe do elemento.
O que é raio de expansão?
O raio de expansão expande ou contrai o tamanho da sombra. Valores positivos tornam a sombra maior que o elemento, enquanto valores negativos a tornam menor. Isso afeta a sombra antes que o desfoque seja aplicado.
Como criar múltiplas sombras?
Você pode criar múltiplas sombras separando cada definição de sombra por uma vírgula. Cada sombra pode ter diferentes valores de deslocamento, desfoque, expansão e cor. As sombras são aplicadas na ordem em que são declaradas, sendo a primeira sombra no topo.
Posso usar cores RGBA para sombras?
Sim, você pode usar qualquer formato de cor CSS incluindo RGBA, HSLA, HEX ou cores nomeadas. RGBA e HSLA são particularmente úteis para criar sombras semitransparentes que se misturam naturalmente com os fundos.
Como copiar o código CSS gerado?
Simplesmente clique no botão "Copiar Código" na interface do gerador. O código CSS será copiado para sua área de transferência e pode ser colado diretamente em sua folha de estilos ou arquivo HTML.
box-shadow é suportado em todos os navegadores?
Sim, box-shadow é suportado em todos os navegadores modernos incluindo Chrome, Firefox, Safari, Edge e Opera. Faz parte do CSS3 desde 2011 e tem excelente compatibilidade com navegadores.
box-shadow afeta o desempenho?
box-shadow tem impacto mínimo no desempenho de navegadores modernos. No entanto, usar múltiplas sombras complexas com grande raio de desfoque em muitos elementos pode afetar o desempenho de renderização, especialmente em dispositivos móveis.
Quais são os casos de uso comuns para box-shadow?
Usos comuns incluem criar efeitos de elevação de cartão, adicionar profundidade a botões, criar campos de formulário inseridos, implementar sombras de material design e adicionar separação visual entre elementos sobrepostos.
Posso animar box-shadow?
Sim, box-shadow pode ser animado usando transições ou animações CSS. No entanto, animar box-shadow pode ser intensivo em desempenho. Para melhor desempenho, considere usar pseudo-elementos com transições de opacidade.
Como usar Gerador de Box Shadow CSS
Crie sombras CSS box-shadow visualmente em vez de adivinhar valores. O gerador roda localmente no seu navegador e nada do que você digita é enviado.
- Ajuste H-Offset e V-Offset para mover a sombra na horizontal e na vertical.
- Aumente o Blur para suavizar as bordas e use o Spread para ampliar ou reduzir a sombra.
- Escolha uma Color e ajuste a Opacity para um visual mais suave e natural.
- Marque Inset para desenhar a sombra dentro do elemento, e não ao redor dele.
- Copie a regra box-shadow pronta da pré-visualização para a sua folha de estilo.
Um blur pequeno com um V-Offset positivo pequeno cria uma sombra de contato sutil e realista logo abaixo do elemento.
Ferramentas relacionadas
- Gerador de Border Radius CSS Gerador visual de border-radius CSS. Ajuste cada canto independentemente com pré-visualização em tempo real e copie o código CSS instantaneamente.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador CSS Grid Gerador visual gratuito de CSS Grid com pré-visualização ao vivo. Crie layouts de grade responsivos interativamente e exporte código CSS pronto para produção.
- Gerador CSS Flexbox Gerador visual CSS Flexbox com visualização ao vivo. Ajuste propriedades flex e obtenha código CSS pronto para usar.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.