Gerador de Box Shadow CSS
Crie belas sombras CSS com editor visual. Adicione múltiplas sombras, efeitos inset, blur, spread e cor. Pré-visualização ao vivo com cópia instantânea. Gerador gratuito.
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08); border-radius: 16px;
Perguntas Frequentes
Can I use multiple shadows?
Yes! You can add up to 4 shadow layers for complex, realistic depth effects. Layered shadows are a key technique in modern UI design (Material Design, Apple HIG).
What is an inset shadow?
An inset shadow appears inside the element instead of outside, creating a pressed or recessed effect. Useful for input fields, buttons, and card inner borders.
Como Usar
Choose Preset
Start with a preset or adjust shadow parameters manually.
Adjust Values
Control X/Y offset, blur, spread, color, and opacity with sliders.
Copy CSS
Copy the generated CSS code to use in your project.
Ferramentas relacionadas
Gerador de gradientes CSS
Crie gradientes CSS bonitos com editor visual. Suporta gradientes lineares, radiais e cônicos. Copie código CSS instantaneamente. Gerador de gradientes CSS gratuito.
Gerador de paletas de cores
Gere paletas de cores harmoniosas. Harmonias complementares, triádicas, análogas. Valores HEX, RGB, HSL.
Conversor de Cores
Converta cores entre formatos HEX, RGB, HSL e CMYK instantaneamente. Seletor e conversor gratuito para designers e desenvolvedores — sem registro, sem upload.
Embelezador e minificador CSS
Embeleze ou minifique código CSS online. Formate CSS com indentação e espaçamento adequados, ou comprima para carregamento mais rápido. Formatador CSS gratuito no navegador — sem registro, instantâneo.
Minificador CSS
Minifique código CSS online para reduzir o tamanho do arquivo e melhorar a velocidade. Remove comentários e espaços. Minificador CSS gratuito, sem upload, resultados instantâneos.