Gerador de Sombras CSS
Crie belas sombras CSS com pré-visualização ao vivo e múltiplas camadas
Crie belas sombras CSS com pré-visualização ao vivo e múltiplas camadas
- Prepare a entrada
Escolha as opções adequadas usando os controles abaixo.
- Execute a tarefa
Ajuste os controles abaixo e confira a prévia.
- Use o resultado
Confira o resultado e use os controles disponíveis para copiar ou baixar.
Sombras em pixels com exportação CSS, SCSS, classe Tailwind e JavaScript. Variáveis precisam de definições na página destino. Tailwind usa valores arbitrários; confira no projeto.
Código Gerado
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Controles de Sombra
px
px
px
px
Configurações de Pré-visualização
200px
Pré-visualização ao Vivo
Preview
Predefinições de Sombra
Sombras Subtis
Sombras Médias
Sombras Fortes
Material Design
Neumórfico
Gerador de Sombras CSS
Sombras em pixels com exportação CSS, SCSS, classe Tailwind e JavaScript. Variáveis precisam de definições na página destino. Tailwind usa valores arbitrários; confira no projeto.
Recursos
- Sombras em pixels com exportação CSS, SCSS, classe Tailwind e JavaScript. Variáveis precisam de definições na página destino. Tailwind usa valores arbitrários; confira no projeto.
- Camadas de Sombra
- Pré-visualização ao Vivo
- Predefinições de Sombra
Como usar
- Ajuste as propriedades da sombra com controles deslizantes
- Escolha a cor da sombra com seletor de cores
- Alterne entre sombras externas e internas
- Adicione múltiplas camadas de sombra
- Selecione das predefinições profissionais
- Pré-visualize a sombra em tempo real
- Personalize o tamanho da pré-visualização
- Copie o código gerado no seu formato preferido
- Gerencie múltiplas camadas
- Use os controles de camada