Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Sombra de Caixa CSS

Gere uma declaração box-shadow CSS a partir de valores de deslocamento, desfoque, difusão, cor e opacidade, com inset opcional — copie a sombra rgba() pronta para usar em sua folha de estilos.

Entrada

Combinada com a cor da sombra em um valor rgba().

Saída

CSS
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-box-shadow-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "offsetX": "4",
    "offsetY": "4",
    "blurRadius": "10",
    "spreadRadius": "0",
    "color": "#000000",
    "opacity": "25",
    "inset": ""
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `css-box-shadow-generator` tool (CSS Box Shadow Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-box-shadow-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Sombra de Caixa CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O que faz

O Gerador de Sombra de Caixa CSS transforma um conjunto de controles deslizantes e um seletor de cores em uma declaração CSS box-shadow pronta para colar. Ajuste o deslocamento horizontal e vertical, raio de desfoque, raio de difusão, cor da sombra e opacidade, e opcionalmente transforme a sombra em uma sombra inset (interna) — o CSS gerado é atualizado instantaneamente conforme você move cada controle.

Sintaxe box-shadow

Uma declaração CSS box-shadow segue esta forma:

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
  • offset-x — o quanto a sombra é deslocada horizontalmente. Valores positivos a empurram para a direita, valores negativos a empurram para a esquerda.
  • offset-y — o quanto a sombra é deslocada verticalmente. Valores positivos a empurram para baixo, valores negativos a empurram para cima.
  • blur-radius — o quão suave é a borda da sombra. 0 produz uma sombra com borda dura; valores maiores espalham o desfoque mais longe e não podem ser negativos.
  • spread-radius — expande (positivo) ou reduz (negativo) a sombra antes de o desfoque ser aplicado. Opcional em CSS puro, mas sempre incluído aqui para uma declaração totalmente explícita.
  • color — a cor da sombra, saída como rgba(r, g, b, a) para que o canal alfa capture o controle deslizante de opacidade junto com o valor RGB.
  • inset — uma palavra-chave opcional, colocada antes dos deslocamentos, que inverte a sombra para ser renderizada dentro da borda do elemento em vez de fora dela (uma aparência "pressionada" ou "entalhada").

Múltiplas sombras podem ser empilhadas separando as declarações por vírgula (box-shadow: a, b, c;); esta ferramenta se concentra em gerar uma declaração de sombra limpa de cada vez, que é o que a maioria dos designs necessita e o que você irá agrupar ou ajustar manualmente para efeitos de múltiplas sombras.

Como usar

  1. Arraste os controles deslizantes de Deslocamento Horizontal e Deslocamento Vertical para posicionar a sombra.
  2. Ajuste o Raio de Desfoque para suavizar a borda, e o Raio de Difusão para expandir ou reduzir a forma da sombra.
  3. Escolha uma Cor da Sombra e defina a Opacidade — a ferramenta combina ambas em um valor rgba() único.
  4. Ative Sombra inset se quiser uma sombra interna em vez de uma sombra de queda.
  5. Copie a declaração box-shadow gerada da saída de código e cole em sua folha de estilos.

FAQ

Por que a saída usa rgba() em vez de uma cor hexadecimal? Porque as cores hexadecimais CSS (#000000) não podem expressar transparência parcial por si só. Combinar o seletor de cores com o controle deslizante de opacidade em rgba(r, g, b, a) permite que você defina com precisão a intensidade da sombra sem uma propriedade opacity separada afetando o resto do elemento.

A spread-radius pode ser negativa? Sim — uma difusão negativa reduz a forma da sombra antes de o desfoque ser aplicado, o que é útil para sombras suaves e contidas (como um efeito de elevação sutil) em vez de uma que se estende muito além das bordas do elemento.

Qual é a diferença entre uma sombra regular e uma sombra inset? Um box-shadow regular é renderizado fora da borda do elemento, como se o elemento estivesse levantado da página. Uma sombra inset é renderizada dentro da borda, fazendo o elemento parecer pressionado ou entalhado.

Esta ferramenta armazena ou carrega algo? Não. Todos os cálculos são executados localmente em seu navegador — suas cores e valores de controle deslizante nunca deixam seu dispositivo.

cssbox-shadowgeneratorshadowrgbaweb design

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios