Crie sombras de caixa visualmente — ajuste deslocamento, desfoque, expansão, cor e opacidade, e copie o CSS.
A propriedade box-shadow dá profundidade a elementos planos. Recebe cinco valores: o deslocamento horizontal, o deslocamento vertical, o raio de desfoque, o raio de expansão e a cor. Uma sombra sutil com desfoque grande e deslocamento pequeno transmite elevação; uma sombra fechada com deslocamento forte transmite borda rígida. Designers ajustam esses números por sensibilidade, o que significa arrastar controles e ver o resultado — exatamente o que esta ferramenta faz.
A caixa de pré-visualização no centro mostra a sombra enquanto você move os controles. A linha CSS abaixo atualiza em tempo real: copie e cole na sua folha de estilos. A ferramenta também suporta sombras inset, que pintam dentro do elemento em vez de fora — úteis para botões pressionados, campos de entrada e painéis rebaixados.
Tudo roda no seu navegador. A pré-visualização é um box-shadow CSS real aplicado a uma div, não uma renderização ou aproximação. O que você vê aqui é o que seus usuários verão.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Expande ou contrai a sombra antes do desfoque. Uma expansão positiva torna a sombra maior que o elemento; uma negativa a torna menor. Zero significa que a sombra tem o mesmo tamanho do elemento.
Sim, no CSS. Esta ferramenta gera uma sombra. Para adicionar mais, separe-as com vírgulas na sua folha de estilos.
Pinta a sombra dentro do elemento em vez de fora. Útil para botões em estado pressionado ou painéis rebaixados.
Sim. A sombra segue o border-radius do elemento automaticamente.
Porque o controle de opacidade precisa de um canal alfa. Cores hex são opacas; rgba permite que a sombra seja semitransparente, o que parece mais natural.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.