Gerador de box-shadow

O que é um gerador de box-shadow e botão?#

Um box-shadow é a regra CSS que pinta uma sombra projetada atrás de um elemento. Apesar do nome, faz muito mais do que sombras: bem camadas, ele produz a elevação suave que faz com que cartões e botões modernos de UI pareçam físicos, pode esculpir um sulco interno para um estado “pressionado” e pode imitar um brilho colorido ao redor de um input focado. A pegadinha é que acertar uma sombra significa fazer malabarismo com cinco valores por camada (deslocamento X, deslocamento Y, desfoque, propagação, cor) mais uma palavra-chave inset opcional — e a maioria dos botões reais empilha duas ou três camadas, então você acaba ajustando de dez a quinze números à mão.

Esta página elimina essa aritmética. Você empilha camadas de sombra e ajusta o raio, a borda, o preenchimento e as cores de um botão na barra lateral; o painel direito mostra um botão ao vivo com a sombra aplicada e escreve tanto a regra CSS .btn quanto o HTML <button> correspondente, pronto para colar. O padrão que você vê ao carregar é o familiar botão elevado de duas camadas usado pelos sistemas de design modernos — um bom ponto de partida que você então ajusta para a sua própria marca.

Como usar#

A barra lateral contém os controles; o painel direito contém a pré-visualização, a saída CSS e a saída HTML.

1. Construa a sombra. Sob Sombras, clique em Adicionar camada para empilhar uma nova camada. Cada camada tem seis controles:
   • Deslocamento X / Deslocamento Y — o quanto a sombra se desloca para a direita/baixo (negativo vai para a esquerda/cima). 0/0 a centraliza, produzindo um brilho uniforme.
   • Desfoque — o quão suave é a borda. 0 é uma cópia dura e plana; valores grandes a difundem. O desfoque não pode ser negativo em CSS.
   • Propagação — aumenta ou diminui a pegada da sombra. Propagação negativa aperta um desfoque largo numa borda firme e convincente.
   • Cor — uma cor hexadecimal. Use o canal alfa (um hex de 8 dígitos como #00000033) para tornar a sombra translúcida; cores totalmente opacas renderizam como #RRGGBB sólido.
   • Interna — ative isto para pintar a sombra dentro do elemento (um visual pressionado, esculpido) em vez de atrás dele.
   • Mover camada para cima / Mover camada para baixo / Excluir reordenam ou removem camadas. A primeira camada da lista é pintada por cima; a última fica mais ao fundo.
2. Estilize o botão. Sob Botão, defina o texto do Rótulo, depois o Raio, a largura da Borda, a Cor da borda, o Preenchimento Y / X, a Cor de fundo e a Cor do texto. Campos de cor emparelham uma caixa de texto hex com um seletor de cor nativo.
3. Copie o que precisa. Copiar ao lado da saída CSS pega a regra .btn completa; Copiar ao lado da saída HTML pega o elemento <button>. Definir a largura da borda como 0 colapsa a borda em border: none;.

Principais funcionalidades#

• Múltiplas camadas, em ordem. Uma sombra convincente é quase sempre duas ou três camadas — uma borda escura e firme próxima ao elemento e uma lavagem mais suave e clara mais adiante. Você pode empilhar e reordenar quantas precisar.
• Serialização de cor ciente de alfa. Uma cor totalmente opaca é emitida como #RRGGBB limpo; no momento em que você adiciona transparência, ela muda para rgba(r, g, b, a) com o alfa aparado — as formas que stylesheets reais de fato usam.
• O botão inteiro numa única regra. Raio, borda, preenchimento, fundo, cor do texto e a sombra são todos emitidos num único bloco .btn, então uma colada estiliza o elemento por completo.
• HTML que corresponde. A saída HTML é simplesmente <button class="btn">Rótulo</button>, com o rótulo escaped em HTML — mesmo um rótulo cheio de < ou & é seguro para colar.
• Pré-visualização ao vivo fixada à esquerda para a direita. Um deslocamento X positivo sempre desloca a sombra para a direita, então a prévia é forçada LTR independentemente do idioma da página.

Exemplo prático#

A página carrega com um botão índigo elevado pronto. A sua sombra é duas camadas: uma borda de propagação -1px firme abraçando o botão e uma lavagem mais larga e mais suave mais adiante. O CSS gerado exato:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Repare nas duas camadas trabalhando juntas: a primeira (desfoque 4px 6px, propagação -1px, alfa 0.2) define a borda de contato nítida; a segunda (desfoque 10px 15px, propagação -3px, alfa 0.102) fornece a elevação ambiente. Reduza o alfa e a sombra vira um carimbo preto e chapado; aumente a propagação e o botão parece flutuar alto demais.

Para um estado pressionado, limpe essas camadas e adicione uma única: Interna ativada, deslocamento 0/2, desfoque 4, propagação 0, cor #00000033. A saída passa a ser inset 0 2px 4px rgba(0, 0, 0, 0.2) — o elemento agora parece afundado na superfície, perfeito para um estilo :active.

FAQ#

Por que a cor sai como rgba(...) quando eu digitei um hex?#

Quando o seu hex tem um canal alfa (8 dígitos, como #00000033), a ferramenta o serializa como rgba(r, g, b, a) porque essa é a forma que a maioria das ferramentas CSS e dos navegadores antigos analisa de forma confiável. Uma cor totalmente opaca — sem alfa, ou alfa em FF — permanece como o #RRGGBB compacto. Ambos renderizam de forma idêntica ao que você ajustou; é puramente sobre qual notação é mais robusta mais à frente.

Em que ordem as camadas são pintadas?#

A primeira camada da lista é pintada por cima, a última no fundo. Para uma elevação natural, coloque a camada nítida, escura e próxima primeiro e a camada suave, clara e distante em segundo — dessa forma a borda de contato firme não é sufocada pela lavagem ambiente. Reordene com Mover camada para cima / Mover camada para baixo até a prévia parecer correta.

Desfoque ou propagação — qual é a diferença?#

Desfoque suaviza a borda da sombra (um gradiente da cor cheia ao transparente). Propagação aumenta ou diminui a sombra inteira numa quantidade fixa antes de o desfoque ser aplicado — propagação positiva a torna maior e mais sólida, propagação negativa a consome e é o segredo de uma borda firme e profissional sobre uma camada de desfoque largo. Um erro comum é recorrer apenas ao desfoque e obter uma nuvem fofa; adicionar -2px ou -3px de propagação a traz de volta à forma.

Posso usar esta sombra num div, não num botão?#

Sim. O CSS funciona em qualquer elemento que aceita box-shadow — copie apenas a linha box-shadow: (ou a regra inteira renomeada para o seu seletor) e descarte as declarações específicas de botão que você não precisa. A saída HTML só é relevante quando você de fato quer um <button>.