Melhor Grátis Gerador de Sombra de Caixa CSS
Construa visualmente a caixa-shadow de CSS com visualização ao vivo, inset e uma segunda camada - copie o código.
100% livre
Sem inscrição
Sem marca de água
✨
Go Pro para os melhores modelos de IA - imagem, vídeo e chat - mais uploads maiores, prioridade na fila e sem espera.
Atualização para Pro
Amor Best.Free? Compartilhe-o
Como funciona
- Mover os deslizantes. Definir offset, difuminar, espalhar, cor e opacidade; alternar o conjunto se quiser uma sombra interior.
- Assista à visualização. A caixa ao vivo atualiza enquanto arrasta; adiciona uma segunda camada em Opções Avançadas para profundidade.
- Copie o CSS. Hit Copie CSS e cole a regra de caixa-shadow diretamente em sua folha de estilo.
Sobre esta ferramenta
Desenhar uma caixa-shadow sem adivinhar os valores de pixel. Arraste os deslizadores offset-X, offset-Y, borro e espalhar, pegue uma cor sombra e selecione em sua opacidade, e veja uma caixa de visualização ao vivo atualização em tempo real - em seguida, copie o CSS exato-shado. Inverte o inset commuta para uma sombra interna. As opções Avançadas empilham uma segunda camada de sombra, para que você possa construir as sombras suaves e multi-camadas usadas em cartões e botões modernos. Tudo funciona no seu navegador.
Para que as pessoas o usam
- Adicione uma sombra suave gota a cartas e modais
- Crie uma sombra interior (inset) para entradas e poços
- Pilha duas camadas para uma sombra realista e difusa
- Afinar offset e borrou para combinar um design mockup
Perguntas mais frequentes
Ofset-X/Y move a sombra horizontal e verticalmente, o borro a suaviza a sua borda, e a difusão cresce ou encolhe toda a sombra antes de ser aplicada a borrosa. A vista previa ao vivo mostra cada mudança instantaneamente.
O Inset desenha a sombra dentro do elemento em vez de atrás dele, dando um olhar pressionado - útil para entradas e comuters. Inverte o inset comuter para mudar.
Escolha uma cor, então use o deslizador de opacidade; a ferramenta sai um valor rgba() para que a sombra se mistura naturalmente.
Sim. Abra opções Avançadas para permitir uma segunda camada de sombra com seu próprio offset, borro, cor e inset.
Não. O gerador funciona inteiramente no seu navegador; os deslizantes apenas calculam uma corda CSS localmente.
Completamente livre, sem conta e sem limites - uma ferramenta do lado do cliente com nada a medir.
Sim. Ele funciona no seu navegador, então CSS Box Shadow Generator funciona em telefones e tablets, bem como desktop - não há nenhum aplicativo para instalar.
Normalmente apenas alguns segundos para um arquivo típico - CSS Box Shadow Generator começa a trabalhar no momento em que você dá a sua entrada.
O uso casual é ilimitado, sob um generoso bonito tampa de uso que o mantém rápido para todos.
Todos os navegadores modernos - Chrome, Safari, Firefox e Edge. CSS Box Shadow Generator não precisa de nada instalado além do navegador que você já usa.