Gerador de box-shadow CSS
Ajuste o deslocamento, o desfoque, a expansão, a cor e a opacidade com controlos deslizantes e um seletor de cor para criar uma box-shadow CSS, veja-a aplicada em tempo real numa caixa de pré-visualização, e copie a declaração box-shadow gerada diretamente para a sua folha de estilos.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);Como funciona
O deslocamento X e o deslocamento Y movem a sombra na horizontal e na vertical, o raio de desfoque suaviza a sua borda, e o raio de expansão aumenta-a ou reduz-a antes de o desfoque ser aplicado. Escolha uma cor e uma opacidade para a sombra, e ative «inset» para desenhar a sombra dentro da borda da caixa em vez de fora dela.
Dica
As sombras subtis geralmente ficam melhor: um pequeno deslocamento, um raio de desfoque cerca de duas a três vezes o deslocamento, e uma opacidade bem abaixo de 50% transmitem um efeito suave e natural em vez de um contorno pesado.
Posso combinar várias sombras?
Sim — a propriedade CSS box-shadow aceita uma lista de sombras separadas por vírgulas, sobrepostas de cima para baixo. Esta ferramenta gera uma sombra de cada vez; combine várias declarações geradas (separadas por vírgulas) para criar sombras sobrepostas e mais realistas.
Mais ferramentas nesta categoria
Testador de expressões regulares
Teste expressões regulares em um texto de exemplo com destaque de correspondências em tempo real.
Analisador de expressões cron
Analise uma expressão cron de 5 campos em uma descrição em linguagem simples e veja as próximas execuções.
Conversor de codificação de texto
Converta texto para hexadecimal UTF-8, binário, pontos de código, Base64, codificação URL e entidades HTML ao mesmo tempo.
Gerador de senhas
Gere senhas fortes e aleatórias instantaneamente, direto no seu navegador.
Formatador e validador de JSON
Formate, valide e minifique JSON instantaneamente no seu navegador.
Gerador de UUID
Gere UUIDs aleatórios versão 4 (RFC 4122) instantaneamente no seu navegador.
Decodificador de JWT
Decodifique e inspecione JSON Web Tokens (JWT) instantaneamente no seu navegador.
Comparador de texto
Compare dois blocos de texto e veja instantaneamente cada linha adicionada ou removida.
Gerador de slugs
Transforme qualquer texto em um slug limpo e compatível com URL em tempo real.
Conversor de bases numéricas
Converta números entre binário, octal, decimal e hexadecimal instantaneamente.
Conversor de timestamp Unix
Converta timestamps Unix em datas e datas em timestamps Unix, em tempo real.
Gerador de hash
Gere resumos SHA-1, SHA-256 e SHA-512 a partir de qualquer texto, direto no seu navegador.
Gerador de expressões cron
Crie uma expressão cron válida de 5 campos usando um formulário simples — sem precisar decorar a sintaxe.
Gerador de Lorem Ipsum
Gere texto de preenchimento Lorem Ipsum em parágrafos, frases ou palavras para mockups e layouts.
Pré-visualizador de Markdown
Escreva Markdown à esquerda e veja o HTML renderizado atualizar em tempo real à direita.
Calculadora de sub-rede IP
Informe um endereço IPv4 em notação CIDR e obtenha rede, máscara, broadcast e faixa de hosts.
Consulta de códigos de status HTTP
Consulte qualquer código de status HTTP e veja seu significado padrão em linguagem simples.
Formatador de SQL
Transforme SQL minificado ou desorganizado em instruções legíveis e indentadas.
Conversor de imagem para Base64
Converta uma imagem em uma URI de dados Base64 para colar diretamente em HTML, CSS ou JSON — tudo no seu navegador.
Comparador de Semver
Compare duas strings de versão semântica e veja qual tem precedência, seguindo as regras oficiais do semver.