Sombras CSS

O que é

Sombra é o que faz um card parecer "levantado" da página, um menu parecer por cima do resto, um campo parecer "afundado". No SW Core você escolhe pelo nome: uma escala de altura (sha-p pouco, sha médio, sha-g alto, sha-gg muito alto), um brilho colorido na cor de um significado (sha-pri, sha-suc…), a sombra para dentro (sha-in), a sombra no texto (tsha-*) e uma coleção de 46 sombras especiais (shad1…shad46).

É só CSS. A escala de altura muda sozinha com o tema: no escuro a sombra é preta e mais forte (para aparecer no fundo escuro), no claro é mais suave. As mesmas sombras existem como variáveis para o seu CSS: var(--sw-sha). Para o halo de luz forte (neon), veja sw-glow na página Superfície.

Quando usar

• Card de produto ou serviço: sha-p ou sha — leve, sem exagero.
• Menu que abre, janela, aviso flutuante: sha-g / sha-gg (bem por cima).
• Botão ou card de destaque com brilho na cor: sha-pri.
• Campo de busca "cavado" ou área rebaixada: sha-in.
• Título sobre foto que precisa ler bem: tsha-5 (sombra escura no texto).

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as sombras estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Coloque a classe de sombra na caixa. Fica melhor com fundo de superfície (bg-sur) e canto suave (r-m).

   Plano Profissional · R$ 99/mês

   <div class="bg-sur r-m sha p-g">Plano Profissional · R$ 99/mês</div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-3 gap-g">
  <div class="bg-sur r-m sha-p p-g"><strong class="t-txt">Corte</strong><p class="t-p mb-0">30 min · R$ 45</p></div>
  <div class="bg-sur r-m sha-p p-g"><strong class="t-txt">Barba</strong><p class="t-p mb-0">20 min · R$ 35</p></div>
  <div class="bg-sur r-m sha-pri p-g bd bd-pri"><strong class="t-pri">Combo</strong><p class="t-p mb-0">50 min · R$ 70</p></div>
</div>

<label class="flx alc gap-p bg-base r-m sha-in px-m py-p">
  <i class="swi-search t-mut"></i>
  <input type="search" class="bd-0 bg-base w-fl" placeholder="Buscar produto…" aria-label="Buscar produto">
</label>

<section class="banner"> <!-- sua foto de fundo no CSS da página -->
  <span class="tsha-6 t-xg fw7 Tbran1">Casa de praia para 8 pessoas</span>
</section>

<div class="bg-sur r-m sha-gg p-m flx alc gap-m">
  <i class="swi-check-circle t-suc t-gg"></i>
  <div>
    <strong class="t-txt">Agendamento confirmado</strong>
    <p class="t-p mb-0">Sábado, 10h — te esperamos!</p>
  </div>
</div>

Precisa de quê

• swcore.min.css — todas as sombras.
• swcore.compl.min.css — só para os ícones swi-* e as cores B…/T… usadas nos exemplos.

Cuidados — erros comuns

• Sombra em caixa sem fundo quase não aparece: dê um fundo (bg-sur) junto.
• Não empilhe sombras fortes em tudo: numa página, poucos elementos "flutuam". Card comum: sha-p; o que abre por cima: sha-g.
• Só uma classe de sombra por elemento: sha + sha-pri juntas brigam e só uma vale.
• tsha-* (escura) some em fundo escuro; lá use tsha-w*.
• As classes de sombra vencem a sombra própria do componente (usam !important). Use sha-0 para tirar a de um componente.

O que ele não faz

• Não há sombra que aumenta ao passar o mouse pronta; faça no seu CSS: .card:hover { box-shadow: var(--sw-sha-g); }.
• As especiais shad42…shad46 têm cores fixas (azul, verde, amarelo, laranja, rosa) e não seguem a marca nem o tema.