Criando profundidade com sombras CSS
O que este gerador faz
No CSS, as sombras têm duas formas. box-shadow desenha uma sombra ao redor da moldura retangular de um elemento — uma div, um botão ou um card — enquanto text-shadow projeta a sombra atrás de cada caractere do texto. Este gerador traz um editor visual para os dois: você ajusta com controles deslizantes o deslocamento horizontal e vertical, o desfoque (blur), a expansão (spread), a cor e a opacidade, e a prévia é redesenhada assim que um valor muda. Quando o resultado agrada, o CSS correspondente já fica pronto para copiar.
Em vez de chutar os pixels na mão, você molda a sombra sobre uma caixa, um botão, um card ou um título reais e obtém a declaração exata de box-shadow ou text-shadow.
Quando usar
Use box-shadow quando um elemento precisa parecer solto acima da página: a elevação no estilo Material de um card, um menu flutuante suave ou o aspecto afundado de um botão pressionado. text-shadow é a ferramenta da tipografia: uma sombra sutil que descola um título de um fundo carregado, ou um brilho colorido atrás do nome de uma marca.
Também é um jeito rápido de reproduzir um layout existente. Carregue uma predefinição como Material, Raised, Floating ou Glow como ponto de partida e depois ajuste os deslocamentos e a opacidade até a sombra bater com o mock-up que você está seguindo.
Exemplo: uma box-shadow em camadas
Uma única sombra se lê assim: box-shadow: 0 4px 6px rgba(0,0,0,0.1); — sem deslocamento horizontal, 4px para baixo, 6px de desfoque e um preto translúcido leve. Para transmitir profundidade de verdade, empilhe duas: uma sombra estreita e escura junto ao elemento mais outra mais larga e suave afastada. Ao adicionar uma camada, a ferramenta as une com uma vírgula: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Cada camada mantém seus próprios deslocamentos, desfoque, expansão e cor.
Detalhes e casos especiais
Offset X e Y movem a sombra para a direita e para baixo (valores negativos vão para a esquerda e para cima), o blur suaviza a borda e o spread aumenta ou reduz a sombra antes de aplicar o desfoque — uma propriedade que text-shadow não suporta. Ativar Inset inverte a sombra para dentro, o que dá o visual dos botões pressionados e dos campos de entrada rebaixados. Mantenha as sombras de texto leves: desfoque forte ou opacidade alta atrás das letras prejudicam a legibilidade. Quando estiver satisfeito, copie o CSS com um clique ou baixe-o para colar direto na sua folha de estilos.