Gerador de CSS Box Shadow grátis

Em ordem: inset (opcional), deslocamento X, deslocamento Y, raio de desfoque, raio de espalhamento e cor. Um X positivo move a sombra para a direita e um Y positivo a move para baixo. Um desfoque de 0 gera uma borda nítida. Esta ferramenta sempre escreve os quatro comprimentos em px, seguidos da cor.

Use um deslocamento Y pequeno, um desfoque grande e baixa opacidade, com espalhamento perto de 0. Um bom ponto de partida aqui é Y 6 px, desfoque 24 px e opacidade 12%, que resulta em 0px 6px 24px 0px #0000001f. Adicione uma segunda camada mais fechada para dar mais profundidade.

O desfoque suaviza a borda da sombra, e quanto maior o desfoque, mais ela se dissipa em uma área ampla. O espalhamento aumenta ou diminui a sombra antes do desfoque: espalhamento positivo a deixa maior que a caixa, negativo a deixa menor. Aqui o desfoque vai de 0 a 100 px e o espalhamento de -50 a 50 px.

Clique em Adicionar camada de sombra. Cada camada ganha uma aba e suas próprias configurações, e o código as une com vírgulas, uma por linha. No CSS, a primeira sombra da lista é desenhada por cima, então a Camada 1 fica acima das outras.

Selecione a camada e marque Sombra inset. O código adiciona a palavra-chave inset e a sombra é desenhada dentro da caixa, em vez de fora. Com inset, um espalhamento positivo deixa a sombra interna mais espessa. Você pode misturar camadas internas e externas em uma única regra.

Use duas camadas com deslocamentos opostos: uma escura, como #000000 a 15% com X e Y em 8 px, e uma branca em -8 px com opacidade total. Dê ao elemento e ao elemento pai o mesmo fundo suave. O cartão de prévia aqui continua branco, então confira o resultado na sua página.

O box-shadow segue a caixa do elemento e seus cantos arredondados, e aceita espalhamento e inset. O filtro drop-shadow() segue a forma visível, como um PNG transparente ou um ícone SVG, mas não tem espalhamento nem inset. Esta ferramenta gera apenas box-shadow.

Não. A sombra não ocupa espaço, então não empurra outros elementos nem muda o tamanho da caixa. Um elemento pai com overflow: hidden pode cortá-la, por isso deixe um espaçamento ao redor do elemento quando o desfoque ou o deslocamento for grande.

A ferramenta adiciona a opacidade à cor como dois dígitos hexadecimais, então só funciona com códigos hex de 6 dígitos, como #1e293b. Códigos curtos como #fff, nomes de cores e rgba() viram um CSS inválido e a sombra desaparece. Um desfoque digitado abaixo de 0 ou uma opacidade acima de 100 têm o mesmo efeito.

Não diretamente, já que a saída é CSS puro. No Tailwind, coloque os valores em uma classe de sombra arbitrária e troque cada espaço por um sublinhado, como em shadow-[0px_4px_12px_0px_#00000026], ou adicione o valor completo como uma sombra personalizada no seu tema.

Sim. É gratuito, sem conta e sem limite de sombras ou camadas. Seus valores ficam nesta aba e não são salvos, então ao recarregar volta a sombra padrão. No site oficial, o Google Analytics conta os cliques em Copiar CSS, nunca os valores da sombra.