Utilitário

Box Shadow

Sombras e brilhos internos para dar profundidade aos elementos.

Classes de box-shadow

Classe CSS	Descrição
`.shadow-ring`	`box-shadow: var(--shadow-ring);`
`.shadow-xs`	`box-shadow: var(--shadow-xs);`
`.shadow-sm`	`box-shadow: var(--shadow-sm);`
`.shadow-md`	`box-shadow: var(--shadow-md);`
`.shadow-lg`	`box-shadow: var(--shadow-lg);`
`.shadow-xl`	`box-shadow: var(--shadow-xl);`
`.shadow-none`	`box-shadow: none;`

Inner glow

As classes de inner glow criam um anel de luz dentro do elemento. São especialmente úteis em temas escuros para "elevar" elementos. Ambas usam o pseudo-elemento ::after do elemento ao qual são aplicadas.

Classe CSS	Descrição
`.inner-glow`	`anel de luz interno (via ::after)`
`.inner-glow-top`	`anel de luz interno apenas no topo (via ::after)`

Você pode combinar .shadow-ring, .shadow-{size} e .inner-glow no mesmo elemento:

<div class="shadow-ring shadow-sm inner-glow"></div>

CSS variables

Variáveis padrão do design system:

:root {
  /* box-shadow */
  --shadow-ring: 0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05);

  --shadow-xs: 0 0 0 1px hsla(…, 0.02), 0 1px 3px -1px hsla(…, 0.2);

  --shadow-sm: 0 0.3px 0.4px hsla(…, 0.02), 0 0.9px 1.5px hsla(…, 0.045), 0 3.5px 6px hsla(…, 0.09);

  --shadow-md: 0 0.9px 1.25px hsla(…, 0.025), 0 3px 5px hsla(…, 0.05), 0 12px 20px hsla(…, 0.09);

  --shadow-lg: 0 1.2px 1.9px -1px hsla(…, 0.01), 0 3px 5px -1px hsla(…, 0.015), 0 8px 15px -1px hsla(…, 0.05), 0 28px 40px -1px hsla(…, 0.1);

  --shadow-xl: 0 1.5px 2.1px -6px hsla(…, 0.009), 0 3.6px 5.2px -6px hsla(…, 0.0115), 0 7.3px 10.6px -6px hsla(…, 0.0125), 0 16.2px 21.9px -6px hsla(…, 0.025), 0 46px 60px -6px hsla(…, 0.15);

  /* inner-glow */
  --inner-glow: inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
  --inner-glow-top: inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
}

Aplicando uma sombra em CSS de componente:

.component-1 {
  box-shadow: var(--shadow-sm);
}

.component-2 {
  box-shadow: var(--shadow-ring), var(--shadow-sm);
}