Crie belas sombras de caixa CSS sem esforço
Gere sombras de caixa impressionantes com nossa interface intuitiva. Copie o código CSS e use-o em seus projetos instantaneamente.
Preview
Sombra da caixa
Personalize-me
Saída CSS
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
Controles de sombra
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
Sombra Suave
Sombra média
Sombra Pesada
Sombra Interior
Diagonal afiada
Brilho de contorno
Sombra dupla
Efeito Levantado
Modo de Utilização
Controles básicos
- Ajuste oDeslocamento horizontalPara mover a sombra para a esquerda ou para a direita
- Ajuste oDeslocamento verticalpara mover a sombra para cima ou para baixo
- Aumente oRaio de desfoquepara tornar a sombra mais suave
- Use Raio de propagaçãopara aumentar ou diminuir o tamanho geral da sombra
- Altere oColor and OpacityPara personalizar a aparência da sombra
Recursos avançados
- Enable Sombra inseridaPara criar um efeito de sombra interna
- Use Múltiplas Sombraspara efeitos mais complexos
- Salvar e carregarPresetspara acesso rápido às suas sombras favoritas
- Click Sombra aleatóriapara inspiração
- Copie o código CSS gerado e cole-o em seu projeto
Related Tools
Conversor SCSS para CSS
Transforme seu código SCSS em CSS. Rápido, fácil e seguro.
Gerador de transição CSS3
Transição suave de opacidade
Conversor de Sass para CSS
Transforme seu código Sass em CSS. Rápido, fácil e seguro.
Ferramenta on-line do gerador de colunas CSS
Crie e visualize funções personalizadas de easing CSS
Calculadora de probabilidade
Calcule probabilidades para vários cenários com nossa calculadora de probabilidade abrangente.
Conversor de unidade de velocidade
Converta entre diferentes unidades de velocidade com precisão para suas necessidades de engenharia, científicas e diárias