Início > Projeto > Gerador de sombra CSS

Outras ferramentas

Seletor de CoresGerador de gradientes CSSConversor PX para PTConversor PX para REMConversor PX para EMLanterna online / luz noturna de telaTeste de pixels mortos onlineVisualização SVG OnlineRecorte Cantos ArredondadosCompositor de camadas de imagem

Gerador de sombra CSS

Gere código box-shadow com controles visuais, suporte a sombra interna/externa, opacidade e visualização

px
px
px
px
%
Prévia da sombra
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

Descricao da ferramenta: Gerador de Box Shadow CSS

O gerador de Box Shadow CSS ajuda a criar sombras com controles visuais. Suporta sombra interna e externa, visualizacao em tempo real e codigo CSS pronto para copiar.

O que e o Gerador de Box Shadow CSS?

Ele permite ajustar deslocamento, desfoque, espalhamento e cor sem escrever o codigo manualmente, e gera a propriedade box-shadow.

Como usar

  1. Ajuste deslocamento, desfoque e espalhamento.
  2. Escolha cor e opacidade.
  3. Ative inset para sombra interna.
  4. Copie o codigo CSS gerado.

Casos de uso comuns

  • Adicionar profundidade a cards, botoes e paineis
  • Transformar especificacoes de design em CSS rapidamente
  • Ajustar direcao e intensidade da sombra
  • Criar elevacao sutil em UI

❓ FAQ

P1: A sombra esta muito forte ou muito fraca.
R: Ajuste primeiro o desfoque e a opacidade, depois o espalhamento.

P2: A direcao nao ficou correta.
R: Valores positivos movem para direita/baixo; negativos para esquerda/cima.

P3: Quando usar inset?
R: Para efeitos internos, como inputs ou bordas internas.

Funcionalidades

  • Visualizacao ao vivo
  • Controle completo dos parametros
  • Alternar sombra interna/externa
  • Copia com um clique

Parametros

  • Offset X / Y: Deslocamento horizontal e vertical
  • Blur: Suavidade da sombra
  • Spread: Expansao ou contracao
  • Color: Cor e opacidade

Exemplos CSS

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

Dicas

  1. Para cards, use mais desfoque e pouca opacidade.
  2. Em hover, aumente o desfoque e reduza o offset.
  3. Combine varias sombras para mais profundidade.