Paleta de Sombras CSS e Elevação
Design Systems e Motor de Elevação Tailwind

Gerador de Paleta de Box Shadow Multicamadas e Elevação CSS

Projete sombras multinível suaves e modernas com níveis de elevação personalizados, difusão de luz ambiente, brilhos coloridos e classes Tailwind.

100% Privacidade no Navegador
Compatível com W3C CSS e DTCG
Predefinições:
Física de Sombras e Motor de Elevação
Inspecionar Nível de ElevaçãoVisualizando Todos os 6 Níveis
4 camadas
2 (Rápido)4 (Equilibrado)6 (Ultra-Suave)
90°
0° Direita90° Luz do Dia180° Esquerda270° Inferior
40px
16px (Sutil)40px (Padrão)80px (Dramático)
1.5x
0.5x (Nítido)1.5x (Natural)3.0x (Brilho Difuso)
-2px
-8px (Ultra-Nítido)-2px (SaaS Moderno)+4px (Expansão Clay)
16%
5% (Sutil)16% (Padrão)50% (Alto Contraste)
#0F172A
Balanço de Luz Ambiente45%
Luz Principal FocalizadaBrilho Ambiente Difuso
Níveis: 6•Microcamadas: 24•Azimute: 90°
#0f172a (16%)
Tela:
Forma:
xs3px elevação

Microelevação

Bordas sutis, detalhes de distintivos e destaques de linhas de tabela

4 camadas
sm8px elevação

Estado de Repouso

Botões, campos de formulário e cartões base em repouso

4 camadas
md14px elevação

Elevação Interativa

Estados de hover, dicas flutuantes e painéis de superfície ativa

4 camadas
lg22px elevação

Elemento Flutuante

Menus suspensos, camadas de seleção e botões de ação flutuantes

4 camadas
xl30px elevação

Modal Sobreposto

Diálogos, gavetas deslizantes e notificações críticas

4 camadas
2xl40px elevação

Flutuação Hero

Diálogos splash, galerias lightbox e modais de nível superior

4 camadas
Formato: preview•1529 Bytes
Padrões: Especificação CSS Nível 3 • WebKit / Blink / Gecko
Hierarquia de Elevação
6 Níveis Discretos
24 Total de Microcamadas Calculadas
Vetor de Luz e Desfoque
Azimute: 90° • 1.5x Difusão
Deslocamento de Dispersão -2px • Exp de Decaimento 1.5
Exportação de Tokens
Pronto para Tailwind e DTCG
Zero Bandas • AST 100% no Navegador

Simulação Física 100% no Cliente

Projeção vetorial de luz e atenuação exponencial executadas inteiramente na memória do seu navegador sem requisições de servidor.

Eliminação de Bandas com Multicamadas

Substitui sombras únicas e duras por gradientes multicamadas com dispersão negativa para bordas nítidas e elegantes.

Tokens Universais para Design Systems

Gera tokens prontos para Tailwind CSS, propriedades customizadas CSS e especificações JSON do Style Dictionary.

Referência técnica e guia de arquitetura

Guia do Desenvolvedor: Gerador de Paleta de Box-Shadow em Camadas e Elevação CSS — Guia de referência

Projete sombras multinível suaves e modernas com níveis de elevação personalizados, difusão de luz ambiente, brilhos coloridos e classes Tailwind.

Parâmetros principais e controles

layersnumber

Número total de camadas de sombra (geralmente de 2 a 6) empilhadas para simular dispersão óptica e penumbra realistas.

Padrão: 4
elevationnumber | string

Distância virtual no eixo Z a partir da superfície, definindo o multiplicador global para deslocamento vertical e raio de desfoque.

Padrão: 16px
shadowColorstring (hex | rgba | hsl)

Cor base e opacidade aplicadas às camadas ambiente e direcional. Permite criar sombras com tonalidades que combinam com a identidade visual.

Padrão: rgba(15, 23, 42, 0.08)
spreadnumber (px)

Modificador de propagação (spread) aplicado progressivamente para expandir ou encolher a silhueta das camadas individuais em relação à caixa.

Padrão: -2px
diffusionCurvestring (linear | exponential | custom-ease)

Curva de progressão matemática responsável pelo aumento exponencial do desfoque e decaimento da opacidade ao longo das camadas sucessivas.

Padrão: exponential

Dicas profissionais e melhores práticas

Evite aplicar preto puro 'rgba

Evite aplicar preto puro 'rgba(0, 0, 0, 0.2)' sobre fundos claros ou coloridos. Combine a sombra com a cor de fundo circundante — como azul ardósia 'rgba(15, 23, 42, 0.08)' — para obter profundidade fotorrealista e cristalina.

Una uma camada nítida e próxima com

Una uma camada nítida e próxima com baixo desfoque para definir o contato com o solo (umbra) a 3 ou 4 camadas amplas e quase transparentes para difusão ambiente (penumbra), eliminando bordas duras artificiais.

Transicionar a propriedade

Transicionar a propriedade 'box-shadow' diretamente força repaints contínuos na CPU a cada quadro. Em vez disso, posicione a sombra de maior elevação em um pseudoelemento '::after' e anime a propriedade 'opacity' via GPU.

Sistema de elevação em Dark Mode

No modo escuro, sombras pretas não criam contraste com superfícies escuras. Adote as regras do Material Design: clareie gradualmente a superfície dos cartões e adicione brilhos sutis de luz ambiente perimetrais.

Problemas comuns e solução de problemas

Banding visível de cores e artefatos de degrau entre as camadas de sombra

Aumente o número de camadas para 4 ou 5 e diminua o incremento da taxa alfa entre elas. Certifique-se de que os valores de desfoque sigam uma progressão exponencial (ex.: 1px, 3px, 8px, 18px, 36px) em vez de linear.

Sombras cortadas abruptamente pelas bordas do elemento pai

Elementos ancestrais com 'overflow: hidden' recortam os limites externos das sombras. Alterne para 'overflow: clip' acompanhado de padding interno adequado, ou mova o efeito de sombra para um pseudoelemento independente.

Queda de taxa de quadros (FPS) ao rolar listas extensas com sombras complexas

Muitas sombras multicamadas concorrentes em listas virtualizadas sobrecarregam a rasterização do navegador. Limite os cartões da grade a 2 ou 3 camadas e reserve composições com 5 ou mais camadas para modais e popovers.

Perguntas frequentes (FAQ)

Por que sombras CSS em camadas são superiores a sombras simples convencionais?▼

Fontes de luz naturais não produzem desfoques homogêneos. Uma sombra real exibe um centro bem definido (umbra) e bordas suaves dispersas (penumbra). Uma única sombra CSS resulta em um gradiente artificial e sem volume, enquanto o empilhamento de 3 a 6 camadas reproduz fielmente a lei do inverso do quadrado da luz.

Como posso integrar as paletas de sombra geradas no Tailwind CSS?▼

Copie a cadeia de valores separada por vírgulas para o seu 'tailwind.config.js' dentro de 'theme.extend.boxShadow', ou declare variáveis personalizadas de CSS como '--elevation-3' no arquivo de estilos global e aplique a classe 'shadow-[var(--elevation-3)]'.

O empilhamento de 5 ou 6 camadas de sombra afeta negativamente a performance?▼

Em elementos estáticos, o navegador processa as sombras na camada de composição uma única vez, resultando em impacto desprezível. Perdas de desempenho ocorrem quase que exclusivamente ao animar ou redimensionar elementos com sombras pesadas continuamente sem aceleração de GPU.

Como deve ser estruturada uma escala de elevação padronizada em um Design System?▼

Defina tokens semânticos de elevação (ex.: elevation-low para botões, elevation-mid para cartões, elevation-high para menus flutuantes e elevation-overlay para diálogos modais). Mantenha sempre fixos o ângulo de incidência da luz e a tonalidade ambiente em todos os tokens.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Guia do Desenvolvedor de CSS GradientDesign

Referência técnica completa para gradientes CSS lineares, radiais e cônicos. Inclui paradas de posição dupla, interpolação no espaço OKLCH, text clipping e integração com Tailwind CSS.

Abrir ferramenta→
Referência de Desenvolvedor do SVG OptimizerDesign

Utilitário de otimização de SVG no navegador para minificar XML, ajustar precisão de caminhos, remover metadados e sanitizar vetores XSS.

Abrir ferramenta→
Referência Técnica de Paleta de CoresDesign

Utilitário para desenvolvedores focado em geração de paletas, auditoria de contraste WCAG, simulação de daltonismo e exportação de tokens.

Abrir ferramenta→
Referência de Desenvolvedor para CSS GlassmorphismDesign

Utilitário e referência técnica para glassmorphism CSS, filtros backdrop, reflexos especulares e interfaces de vidro fosco aceleradas por GPU.

Abrir ferramenta→
Calculadora de Proporção de Tela ReferênciaDesign

Utilitário para desenvolvedores focado no cálculo de aspecto de tela, redimensionamento de resoluções, inspeção de mídias e alinhamento de codecs de vídeo.

Abrir ferramenta→
Gerador de Favicon e Ícones de Aplicativo CheatsheetDesign

Guia técnico de referência para gerar favicons para navegadores, ícones Apple Touch, manifestos PWA Android e snippets HTML.

Abrir ferramenta→