Pular para o conteúdo
Toolars
Explorar

Gerador de sombras CSS

CSS Box Shadow Generator

Uma a oito sombras com deslocamento, desfoque, expansão, cor, opacidade e inset independentes.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como montar uma sombra de caixa em CSS

  1. 01

    Posicione a sombra

    1–8 Camadas de sombra · X/Y (px): −100…100 · Desfoque (px): 0–100 · Expansão (px): −100…100 · Cor · Opacidade: 0–1 · inset

  2. 02

    Ajuste desfoque e espalhamento

    Uma a oito sombras com deslocamento, desfoque, expansão, cor, opacidade e inset independentes.

  3. 03

    Defina a cor e a opacidade

    Escolha uma Cor da sombra de seis dígitos — o padrão #0b0d12 é um quase-preto — e defina a Opacidade da sombra de 0 a 1 em passos de 0,01. A opacidade vira o canal alfa da cor rgba() na saída, então 0,28 renderiza como rgba(11, 13, 18, 0.28).

  4. 04

    Ative o modo inset

    Ligue Sombra interna para mover a sombra para dentro da caixa, o que parece uma superfície pressionada ou rebaixada — útil para campos de entrada e botões ativados. A declaração gerada adiciona a palavra-chave inset no início quando a opção está ligada.

  5. 05

    Compare com o exemplo

    Pressione Carregar exemplo para um estilo de referência marcante: deslocamento de 8 px nos dois eixos com desfoque zero e espalhamento zero em #0f4cff com opacidade 0,35 — um contorno deslocado de bordas duras. Redefinir volta à sombra suave padrão, e a pré-visualização ao vivo se renderiza de novo a cada mudança.

  6. 06

    Copie ou baixe o CSS

    Pressione Copiar CSS para copiar a regra .shadow-card, ou Baixar .css para salvá-la como toolars-box-shadow.css. Copiar fica bloqueado enquanto algum valor estiver fora do intervalo, então a declaração que você cola é sempre válida. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de sombras CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de sombras CSS realmente faz

Elevação é fácil de sentir e difícil de adivinhar: um cartão de preços que deve flutuar logo acima da página, um modal que precisa de profundidade real, um botão pressionado que parece rebaixado. Escrever deslocamentos, desfoque e espalhamento às cegas significa recarregar a página a cada ajuste. O Gerador de sombras CSS mostra o resultado exato enquanto você arrasta cada controle, de uma elevação sutil com opacidade 0,28 a um contorno deslocado de bordas duras. A declaração copiada entra direto em uma folha de estilos — tudo calculado localmente na aba.

Perguntas frequentes

A que os controles correspondem no CSS?
A saída segue a ordem do box-shadow: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de espalhamento e depois a cor. A Opacidade da sombra vira o canal alfa de uma cor rgba(), e a opção Sombra interna adiciona a palavra-chave inset ao valor inteiro. Uma a oito sombras com deslocamento, desfoque, expansão, cor, opacidade e inset independentes. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
O que um raio de espalhamento negativo faz?
Ele encolhe a sombra em todos os lados antes de o desfoque ser aplicado, o que impede que um desfoque grande vaze muito além das bordas do elemento. O espalhamento padrão de -4 px é exatamente esse truque: um desfoque suave de 32 px que ainda abraça o cartão em vez de transbordar para fora.
Posso empilhar várias sombras em uma execução?
Uma a oito sombras com deslocamento, desfoque, expansão, cor, opacidade e inset independentes. Adicionar / Remover · 1–8 Camadas de sombra
Quando devo usar uma sombra interna?
Uma sombra interna renderiza dentro da borda do elemento, então a superfície parece pressionada ou rebaixada em vez de elevada. Combina com campos de texto, poços e botões ativados. Ative Sombra interna e a pré-visualização mostra o efeito imediatamente — a regra copiada simplesmente ganha a palavra-chave inset.
Quais são os intervalos de valores?
1–8 Camadas de sombra · X/Y (px): −100…100 · Desfoque (px): 0–100 · Expansão (px): −100…100 · Cor · Opacidade: 0–1 · inset. Confira fonte, controles e validação antes de exportar. Um resultado inválido não pode ser exportado.
Algo é enviado ou armazenado?
Não. Tudo renderiza nesta aba do navegador a partir de valores de estilo validados, e nenhum valor gerado entra em armazenamento, registros, análise ou rede.

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar