Gerador de CSS Box Shadow
Construa sombras CSS multicamadas visualmente com pré-visualização ao vivo — copie o CSS com um clique
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
Continue explorando
Outras ferramentas de Desenvolvimento que você pode gostar…
Formatador JSON
Formate, valide e minifique JSON com destaque de sintaxe e detecção de erros
Codificador/Decodificador Base64
Codifique texto ou arquivos em Base64 e decodifique strings Base64 em texto legível
Codificador/Decodificador de URL
Codifique e decodifique componentes de URL e parâmetros de query string
Gerador de UUID
Gere UUIDs aleatórios (v1, v4) ou gere múltiplos UUIDs em lote
Gerador de Hash
Gere hashes MD5, SHA-1, SHA-256, SHA-512 de texto ou arquivos
Testador de Regex
Teste expressões regulares com destaque de correspondências em tempo real
Decodificador JWT
Decodifique e inspecione JSON Web Tokens — header, payload e assinaturas
Formatador HTML
Formate e embeleze código HTML com indentação correta e destaque de sintaxe