CSS Box-Shadow Generator

Crie sombras CSS simples e múltiplas visualmente com pré-visualização ao vivo.

px
px
px 
{{ cssOutput }}

O que é CSS box-shadow?

A propriedade CSS box-shadow adiciona uma ou mais sombras a um elemento. As sombras criam profundidade e fazem com que elementos como cartões, botões e diálogos se destaquem do fundo.

A sintaxe do box-shadow

A sintaxe é: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X e Offset-Y determinam a posição da sombra. O raio de desfoque controla a suavidade, o raio de expansão aumenta ou diminui a sombra.

Dicas para sombras perfeitas

  • Use múltiplas sombras com diferentes valores de desfoque para resultados mais realistas.
  • Mantenha as cores de sombra sutis: use tons de preto transparentes em vez de cores fortes.
  • As sombras inset funcionam muito bem para botões pressionados e campos de entrada.
  • Teste as sombras nos modos claro e escuro, pois podem parecer diferentes.