Gerador de sombra CSS
Gere sombras CSS
Como usar Gerador de sombra CSS
Gere sombras CSS Ferramenta gratuita online, sem registo, sem anúncios intrusivos. Use agora.
Para que são usadas as sombras CSS?
Sombras adicionam profundidade, elevação e hierarquia visual às interfaces. Material Design do Google, as Human Interface Guidelines da Apple e a maioria dos sistemas de design modernos usam sombras sistematicamente para transmitir quais elementos estão mais próximos do usuário — criando uma sensação de profundidade tridimensional em interfaces planas.
- Elevação de cards: Uma sombra sutil em um componente de card o eleva do fundo, sinalizando que é uma unidade de conteúdo interativa ou distinta. Sombras mais profundas indicam maior elevação — como os botões de ação flutuantes (FAB) no Material Design do Google.
- Sombras de modal e dropdown: Overlays (modais, menus dropdown, tooltips) usam sombras fortes para indicar que estão flutuando acima do conteúdo da página — criando clara hierarquia visual de profundidade.
- Indicadores de foco: Box-shadows podem substituir outlines para estados de foco:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)cria um anel de foco visível sem afetar o layout — uma técnica comum em sistemas de design acessíveis. - Legibilidade de texto: Uma text-shadow sutil em texto branco sobre uma imagem garante legibilidade independentemente do conteúdo da imagem por trás do texto — sem precisar de overlay de cor sólida.
- Neumorfismo: O estilo de design neumórfico usa sombras duplas — uma sombra clara em um lado e uma sombra escura no outro — para criar um efeito 3D extrudido ou encaixado que parece esculpido no fundo.
Sintaxe de box-shadow: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Múltiplas sombras podem ser empilhadas: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — técnica usada no Material Design para criar sombras naturais multicamada.
Frequently Asked Questions
Qual é a diferença entre box-shadow e drop-shadow()?
box-shadow se aplica à caixa retangular do elemento — não segue formas irregulares como imagens PNG com fundos transparentes. A função CSS filter drop-shadow() segue a forma renderizada real, incluindo áreas transparentes. Use drop-shadow() para ícones e imagens com transparência; box-shadow para elementos retangulares como cards e botões.
O que a palavra-chave 'inset' faz?
A palavra-chave inset faz a sombra aparecer dentro do elemento em vez de fora. Uma sombra inset cria a aparência de um elemento recuado ou pressionado — útil para estados de botão pressionado, campos de entrada (efeito de profundidade interna) ou elementos de UI neumórficos encaixados.
O que é o spread radius em box-shadow?
O quarto valor em box-shadow é o raio de expansão — ele expande ou contrai a sombra. Um valor positivo torna a sombra maior do que o elemento; negativo a torna menor. Definir offset-x e offset-y como 0 com uma expansão positiva cria um efeito de contorno/brilho uniforme ao redor do elemento — útil para indicadores de foco.
Por que minha sombra parece diferente no Safari vs Chrome?
Diferenças de renderização de sombra entre navegadores geralmente são devidas à renderização de subpixels e correção de gamma. Safari e Chrome usam algoritmos de composição ligeiramente diferentes. Para resultados consistentes entre navegadores, use cores RGBA com valores alfa explícitos em vez de opacity, e teste sombras em ambos os motores de renderização durante o desenvolvimento.
Quantas box-shadows posso empilhar?
Não há um limite estrito — você pode empilhar múltiplas box-shadows com uma lista separada por vírgulas. Várias sombras empilhadas com diferentes raios de desfoque e opacidades criam sombras de aparência mais natural que imitam a iluminação do mundo real. O Material Design do Google define receitas específicas de sombra multicamada para cada nível de elevação.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow adiciona uma sombra fora (ou dentro com inset) da caixa — não afeta o layout. outline desenha uma linha fora da borda — também não afeta o layout, comumente usado para indicadores de foco acessíveis. border adiciona uma linha dentro do elemento — afeta o layout (aumenta o tamanho da caixa, a menos que use box-sizing:border-box). filter: drop-shadow() segue a forma renderizada real do elemento, incluindo transparências. Para elevação e profundidade de UI: box-shadow. Para anéis de foco: outline ou box-shadow. Para sombras de ícone: drop-shadow().