Gerador de sombras CSS (box-shadow, text-shadow)
Ajuste com controles deslizantes box-shadow em camadas, sombras internas, text-shadow e filtros drop-shadow, confira em um cartão de pré-visualização e copie o CSS
Carregando a ferramenta…
Ajusta box-shadow, text-shadow e filter: drop-shadow() com controles deslizantes, empilha várias camadas de sombra e fornece o CSS. Use-o para definir a profundidade de um cartão ou botão, um aspecto pressionado com inset ou um contorno de texto enquanto observa uma pré-visualização ao vivo.
Como usar
- Em “Tipo”, escolha box-shadow, text-shadow ou filter: drop-shadow.
- Em cada camada de “Camadas de sombra”, defina “Deslocamento X”, “Deslocamento Y”, “Desfoque”, “Expansão” (apenas box-shadow), “Cor da sombra” e “Opacidade”. Ative “Interna” para uma sombra interna.
- Pressione “Adicionar camada” ou “Duplicar” para ter mais camadas e use as setas para reordená-las. Desmarcar uma camada deixa-a de fora por enquanto.
- Na pré-visualização à esquerda, defina “Fundo”, “Cor do cartão”, “Raio dos cantos” e “Tamanho do cartão” para se aproximar da sua tela real.
- Se quiser, escolha um ponto de partida em “Predefinições” e depois pressione “Copiar” ao lado do CSS.
Como funciona
- Uma camada de box-shadow é escrita como “[inset] x y desfoque expansão cor”. Uma expansão positiva aumenta a sombra e uma negativa a reduz. text-shadow não tem expansão nem inset.
- filter: drop-shadow() segue a forma visível (um ícone PNG, um SVG) em vez da caixa, e várias funções escritas uma após a outra se acumulam.
- As cores são escritas em HEX quando opacas e como rgb(r g b / a) nos outros casos. Uma profundidade natural costuma vir de duas ou três camadas de baixa opacidade com desfoque crescente.
- As camadas e as configurações da pré-visualização são guardadas neste navegador.
Perguntas frequentes
- Qual é a ordem dos valores em box-shadow?
- Deslocamento X, deslocamento Y, desfoque, expansão e cor, com inset no início para uma sombra interna. Por exemplo: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).
- Como dou a um cartão uma sombra natural?
- Empilhe duas ou três camadas com opacidade de 10 a 20 por cento e aumente passo a passo o deslocamento vertical e o desfoque. As predefinições “Elevação média” e “Suave, 5 camadas” são construídas assim.
- text-shadow pode criar um contorno de texto?
- Sim. Quatro sombras sem desfoque nas quatro direções (1px 1px, -1px -1px, 1px -1px, -1px 1px) formam um contorno fino. A predefinição “Contorno de texto” faz exatamente isso.
- Qual é a diferença entre box-shadow e o filtro drop-shadow?
- box-shadow sombreia a caixa retangular do elemento; o filtro drop-shadow sombreia a forma visível. Para ícones ou SVG sobre fundo transparente, drop-shadow é a escolha certa.