Gerador de box-shadow CSS — sombras em camadas, neumorfismo e text-shadow
Crie efeitos de box-shadow e text-shadow em camadas com prévia ao vivo e predefinições de elevação, neumorfismo e brilho, e copie o CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Funciona inteiramente no seu navegador. Nada do que você digita é enviado para nós ou armazenado. Ver todas as ferramentas grátis.
Encontrou um problema ou algo que poderia ser melhor? Lemos todas as mensagens e corrigimos rápido.
Este gerador de box-shadow CSS grátis permite criar sombras no olho e copiar o CSS exato de box-shadow ou text-shadow. Empilhe quantas camadas precisar, cada uma com seu próprio deslocamento horizontal e vertical, desfoque, expansão, cor, opacidade e opção inset, e veja o resultado num cartão de prévia cujo fundo, cor e raio dos cantos você pode mudar para combinar com o seu design.
Sombras realistas quase nunca têm uma camada só. Uma sombra nítida e próxima somada a uma grande e fraca dá a impressão de um objeto erguido da página, que é como funcionam os níveis de elevação do Material Design, e o neumorfismo precisa de duas sombras opostas num card da mesma cor do fundo. As predefinições cobrem esses padrões, e as notas abaixo explicam a sintaxe do box-shadow, por que as camadas ficam melhores e quanto as sombras custam em desempenho de renderização.
Como usar
- Escolha Sombra de caixa ou Sombra de texto.
- Comece por uma predefinição ou ajuste a camada selecionada com os controles deslizantes: deslocamentos, desfoque, expansão, cor, opacidade e inset.
- Adicione mais camadas com + Adicionar camada (ela copia a selecionada), selecione uma camada na lista para editá-la e reordene com as setas. A primeira camada é desenhada por cima.
- Ajuste a prévia ao seu design: defina o fundo da página, a cor do cartão e o raio dos cantos.
- Copie o CSS ou a classe Tailwind com valor arbitrário.
Perguntas frequentes
O que significam os valores do box-shadow?
box-shadow: inset? deslocamento-x deslocamento-y desfoque expansão cor. O deslocamento x move a sombra para a direita (negativo: para a esquerda), o deslocamento y move para baixo (negativo: para cima). O desfoque define o quanto a borda é suave; 0 dá uma borda dura. A expansão aumenta a sombra antes do desfoque (negativa, ela encolhe, e é assim que se evita que um desfoque grande apareça nas laterais). O inset desenha a sombra dentro do elemento em vez de fora. Várias sombras são separadas por vírgulas, e a primeira é pintada por cima.
Como faço uma sombra suave e realista?
Empilhe duas ou mais sombras com opacidade baixa em vez de uma escura: uma sombra pequena e justa para a borda de contato (0 1px 2px com cerca de 10% de preto) e outra maior e mais suave para a luz ambiente (0 8px 24px com 8 a 12%). Use uma expansão levemente negativa na maior para que ela fique por baixo do elemento. Tingir a sombra com uma versão escura da cor de fundo, em vez de preto puro, também fica mais natural em páginas coloridas.
Como crio um efeito de neumorfismo?
Dê ao elemento a mesma cor de fundo do elemento pai e acrescente duas sombras: uma mais escura deslocada para baixo e para a direita e outra mais clara (muitas vezes branca) deslocada para cima e para a esquerda, por exemplo 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) sobre #e0e5ec. Use inset nelas para um estado pressionado. Cuidado ao usar em controles: botões neumórficos têm contraste muito baixo com o fundo e geralmente não atendem à exigência de 3:1 da WCAG para componentes de interface, a menos que você acrescente uma borda ou um contorno mais forte.
Qual é a diferença entre box-shadow e filter: drop-shadow()?
O box-shadow segue a caixa retangular do elemento, incluindo o border-radius, e suporta expansão e inset. O filter: drop-shadow() segue os pixels visíveis, então contorna um PNG transparente, um ícone SVG ou uma forma recortada, mas não tem expansão nem inset e aceita só uma sombra por função. Use box-shadow para cards e botões e drop-shadow para imagens e ícones irregulares.
O text-shadow aceita expansão ou inset?
Não. O text-shadow aceita só deslocamento x, deslocamento y, desfoque e cor. Para simular um contorno, empilhe quatro ou mais sombras duras deslocadas 1px em cada direção (a predefinição Contorno) ou use -webkit-text-stroke, que hoje tem amplo suporte. Uma sombra de texto suave e de baixa opacidade pode melhorar a legibilidade de texto branco sobre fotos, mas não conta para o contraste da WCAG.
Box shadows prejudicam o desempenho?
Sombras estáticas são baratas. Raios de desfoque grandes ficam caros quando são repintados a cada quadro, por exemplo ao animar o box-shadow no hover de muitos cards. O truque padrão é colocar a sombra num pseudoelemento e animar a opacidade dele, o que o navegador consegue compor na GPU sem repintar o desfoque.
Elevação: uma escala de sombras consistente
Os design systems definem alguns poucos níveis de elevação e usam só esses, para que a 'altura' de um elemento signifique algo: cards no nível 1, menus suspensos no 2 ou 3, diálogos no 4 ou 5. As predefinições de Elevação daqui seguem esse padrão, cada um combinando uma sombra justa com outra mais ampla, as duas crescendo com a altura.
• Nível 1, cards em repouso e itens de lista: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Nível 2, cards elevados e itens em hover: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Nível 3, menus suspensos e popovers: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Níveis 4 e 5, modais e diálogos: deslocamentos e desfoques maiores, ainda abaixo de 20% de opacidade.
Guarde os níveis como propriedades personalizadas de CSS (--shadow-1 a --shadow-5) ou no tema do Tailwind, em vez de colar valores nos componentes, para que a escala possa ser ajustada num só lugar.
Sombras no modo escuro
Uma sombra preta sobre um fundo quase preto é invisível, então interfaces escuras mostram a elevação de outro jeito: superfícies mais altas ganham cores de fundo um pouco mais claras, e as sombras, se mantidas, ficam maiores e mais opacas. Uma borda clara sutil de 1px ou um realce interno (inset 0 1px 0 rgba(255,255,255,0.06)) costuma funcionar melhor que qualquer sombra externa. Brilhos, como a predefinição Brilho, funcionam em fundos escuros porque acrescentam luz em vez de tirá-la; reserve-os para estados de foco e destaques, e não para todos os cards.
Ferramentas grátis relacionadas
- Gerador de gradiente CSS — Crie gradientes lineares, radiais e cônicos com pontos de cor arrastáveis, um seletor de ângulo e predefinições. Copie o CSS ou uma classe do Tailwind.
- Gerador de paleta de cores — Pressione a barra de espaço para uma nova paleta, trave as cores de que gostar, escolha uma harmonia ou extraia a paleta de uma foto. Exporte para CSS, Tailwind, SCSS, JSON ou PNG.
- Verificador de contraste — Confira cores de texto e de fundo segundo a WCAG 2.x AA e AAA, veja o valor Lc da APCA e encontre a cor mais próxima que passa.
- Seletor e conversor de cores — Capture qualquer cor de qualquer lugar da tela ou converta na hora entre HEX, RGB e HSL.