Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Compõe uma sombra a partir de camadas e a emite como `box-shadow`, `text-shadow` ou um filtro `drop-shadow()`. O que vale saber é que uma camada quase nunca é o certo: uma sombra real é um termo de contato escuro e fechado mais um ambiente amplo e tênue, e uma sombra única só consegue ser um dos dois. A página insiste nisso, e diz quais partes de uma camada a propriedade de destino não consegue expressar.
- Camada 1
- Camada 2
Predefinições
Os deslocamentos crescem mais ou menos linearmente com a elevação e o desfoque com a raiz quadrada dela, que é o que uma luz pontual acima de um plano produz de verdade. A opacidade cai conforme a sombra cresce — a mesma oclusão espalhada por mais área — e inverter isso é o que faz sombras ajustadas à mão parecerem borrões.
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);Como usar
Diga em que ela vai
`box-shadow` para um card ou um botão, `text-shadow` para tipografia, `drop-shadow()` para qualquer coisa com transparência real — um ícone ou um PNG recortado. A prévia muda para corresponder, então você está sempre olhando para a coisa certa.
Comece de uma predefinição
São pilhas de duas camadas com os deslocamentos crescendo linearmente com a elevação, o desfoque com a raiz quadrada dela, e a opacidade caindo conforme a sombra se espalha. Esta última é a parte que as pessoas fazem ao contrário à mão, e fazê-la ao contrário é o que faz uma sombra parecer um borrão.
Defina a cor da superfície como a que você realmente tem
Uma sombra ajustada sobre branco é fraca demais em uma página cinza e forte demais em uma escura. A amostra de superfície está ali para que você ajuste contra o fundo em que o componente vai realmente ficar.
Ajuste as camadas
Deslocamento, desfoque, espalhamento e cor por camada, e uma caixa de seleção de sombra interna. Digite a cor em vez de usar a amostra quando precisar de alfa — cores de sombra são quase sempre translúcidas, e o seletor de cor nativo não consegue representar isso.
Copie a declaração
O nome da propriedade muda com o destino, então o que você copia está pronto para colar como está.
Perguntas frequentes
Minha sombra interna e o espalhamento sumiram quando troquei o destino. Para onde foram?
Foram descartados, e a página diz isso acima da saída. `text-shadow` não tem sombra interna nem espalhamento na sua gramática — recebe um x, um y, um desfoque e uma cor, e ponto final. `drop-shadow()` também não tem sombra interna nem espalhamento. Emiti-los mesmo assim produziria uma declaração que o navegador descarta por inteiro, o que é pior do que perder a parte que não consegue sobreviver.
Por que a amostra de cor não corresponde ao que eu digitei?
A amostra é um `<input type="color">`, que só entende `#rrggbb` e não tem alfa nenhum. Ela mostra o melhor hexadecimal possível do que você digitou, e o campo de texto continua sendo a autoridade. Edite o texto quando o valor tiver alfa.
`drop-shadow()` é só um `box-shadow` mais lento?
Não, ele responde a uma pergunta diferente. `box-shadow` contorna a caixa de borda, então um PNG transparente ganha um retângulo. `drop-shadow()` segue o canal alfa, então contorna a forma real. Ele custa, sim, uma passada de composição, e não consegue fazer sombra interna nem espalhamento, então use-o quando a forma importa e `box-shadow` no resto.
Quantas camadas é demais?
Duas ou três fazem tudo o que uma interface precisa. Cada camada é mais um desfoque que o compositor roda a cada pintura, e uma sombra de seis camadas em uma lista de duzentas linhas é um custo mensurável de taxa de quadros em um celular. As predefinições param em três por esse motivo.
Pode receber de
Gerador de border-radius
Border Radius Generator
Modela cada canto separadamente, inclusive a sintaxe de dois valores para squircle, e gera o CSS.
Editor de curvas de easing
Easing Curve Editor
Edita uma curva cubic-bezier ou de mola contra uma prévia animada e gera a função de tempo CSS.
Playground de filtros CSS
CSS Filter Playground
Empilha filtros de desfoque, brilho, saturação, matiz e drop-shadow numa amostra e gera o CSS.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Gerador de border-radius
Border Radius Generator
Modela cada canto separadamente, inclusive a sintaxe de dois valores para squircle, e gera o CSS.
Playground de filtros CSS
CSS Filter Playground
Empilha filtros de desfoque, brilho, saturação, matiz e drop-shadow numa amostra e gera o CSS.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.