Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de sombras CSS

CSS Box Shadow Generator

Ajuste deslocamento, desfoque, espalhamento, cor, opacidade e inset num cartão ao vivo e copie a declaração box-shadow exata.

Caminho da tarefa / da entrada ao resultado

Posicione a sombra

Roda localmente · Nada é enviado

Como Gerador de sombras CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como montar uma sombra de caixa em CSS

  1. 01

    Posicione a sombra

    Defina o Deslocamento horizontal e o Deslocamento vertical, cada um de -80 a 80 px. Valores negativos empurram a sombra para a esquerda ou para cima; zero a centraliza atrás do cartão. O espaço de trabalho abre com 12 px para a direita e 18 px para baixo, um posicionamento clássico de sombra projetada.

  2. 02

    Ajuste desfoque e espalhamento

    Ajuste o Raio de desfoque de 0 a 120 px para suavidade — o padrão é 32 px — e o Raio de espalhamento de -40 a 60 px para expandir ou encolher a sombra antes de o desfoque ser aplicado. O espalhamento padrão de -4 px comprime levemente a sombra para uma borda mais nítida.

  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.

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.
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?
Este espaço de trabalho ajusta uma sombra por vez para que cada valor fique explícito. Para sobrepor várias sombras, copie a declaração, ajuste os valores e copie de novo — o CSS aceita uma lista de sombras separadas por vírgula em uma única propriedade, e uma sombra ambiente suave mais uma sombra de contato apertada é uma combinação comum.
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?
Deslocamento horizontal e Deslocamento vertical vão de -80 a 80 px, Raio de desfoque de 0 a 120 px, Raio de espalhamento de -40 a 60 px e Opacidade da sombra de 0 a 1. Valores fora do intervalo são sinalizados com VERIFIQUE OS VALORES e bloqueiam copiar até serem corrigidos.
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.

Continuar em Design

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

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

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar