Gerador Box-Shadow CSS Gratis
Crie box-shadow CSS com preview ao vivo. Ajuste todos os parametros e copie o CSS.
Predefinicoes
Saida CSS
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);
Como usar o gerador de CSS Box-Shadow
Ajuste os cursores de deslocamento horizontal e vertical, raio de desfoque, dispersão, cor e opacidade para criar a sombra perfeita. Ative inset para sombras interiores. A pré-visualização em direto atualiza-se de imediato para ver exatamente como ficará a sombra. Clique em Copiar CSS quando estiver satisfeito.
Quando usar sombras CSS box-shadow
- Adicionar profundidade e elevação a cartões, botões e modais no design de interfaces
- Criar efeitos de neumorfismo ou glassmorfismo com sombras inset
- Prototipar estados hover e feedback interativo para componentes web
Perguntas Frequentes
Posso usar várias box-shadow num só elemento?
Sim. O CSS permite valores box-shadow separados por vírgulas. Gere cada sombra separadamente com esta ferramenta e depois combine-as na sua folha de estilos para obter efeitos de profundidade em camadas.
Qual é a diferença entre sombras inset e normais?
As sombras normais aparecem fora do elemento e criam um efeito de relevo. As sombras inset são desenhadas no interior e dão um aspeto de premido, muito usado em designs neumórficos.
Esta ferramenta guarda as minhas definições?
Não. Todo o processamento é feito inteiramente no seu navegador. Nada é guardado nem enviado para nenhum servidor.
Todo o processamento ocorre localmente no navegador. Nenhum dado e armazenado ou transmitido.
Estas ferramentas são grátis para sempre. A SARA vai além.
A SARA é a sua agente AI no WhatsApp: responde a clientes, faz reservas e follow-up — 24/7, automaticamente. Experimente grátis por 14 dias.
Comece o teste grátis de 14 dias →