Categorias

← View All Tools

Gerador de Sombra de Caixa CSS

Gera propriedades de sombra de caixa CSS

-100 -100 100
-100 4 100
0 10 100
-50 -50 50
0 0.2 1

Fatos principais

Categoria
Design
Tipos de entrada
range, color, checkbox
Tipo de saída
text
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Gerador de Sombra de Caixa CSS permite criar e visualizar sombras personalizadas para elementos web de forma rápida, gerando o código CSS pronto para uso em seus projetos.

Quando usar

  • •Ao criar cartões ou botões que precisam de profundidade visual.
  • •Para ajustar rapidamente a intensidade e o desfoque de sombras em layouts responsivos.
  • •Quando você precisa converter valores visuais de design em código CSS preciso.

Como funciona

  • •Ajuste os controles deslizantes para definir o deslocamento horizontal e vertical da sombra.
  • •Modifique o raio de desfoque e a propagação para controlar a suavidade e o tamanho da sombra.
  • •Selecione a cor e a opacidade desejadas para integrar a sombra ao seu esquema de cores.
  • •Ative a opção de sombra interna (inset) se desejar um efeito de profundidade invertida.

Casos de uso

Criação de cartões de interface (UI cards) com elevação suave.
Estilização de botões de chamada para ação (CTA) para maior destaque.
Aplicação de efeitos de profundidade em modais e menus flutuantes.

Exemplos

1. Sombra Suave para Cartão

Desenvolvedor Front-end
Contexto
Preciso criar um efeito de elevação sutil para cartões de conteúdo em um dashboard.
Problema
Escrever manualmente os valores de sombra é demorado e difícil de visualizar.
Como usar
Ajustei o deslocamento vertical para 4px, desfoque para 12px e opacidade para 0.15.
Configuração de exemplo
horizontal: 0, vertical: 4, blur: 12, spread: 0, color: #000000, opacity: 0.15, inset: false
Resultado
Um código CSS limpo que cria uma sombra elegante e profissional para os cartões.

2. Efeito de Botão Pressionado

Designer de UI
Contexto
O design exige que o botão pareça 'afundado' quando o usuário clica nele.
Problema
Configurar a sombra interna (inset) manualmente requer muitos testes.
Como usar
Ativei a opção 'Sombra Interna' e ajustei o deslocamento para valores pequenos.
Configuração de exemplo
horizontal: 2, vertical: 2, blur: 5, spread: 0, color: #000000, opacity: 0.2, inset: true
Resultado
O código CSS gerado aplica um efeito de profundidade interna que simula o clique do botão.

Testar com amostras

design
Exemplos de Seletores CSS
Coleção de exemplos de seletores CSS para testes de extração e análise
title token css
sample
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
sample
Exemplos do Framework CSS Milligram
Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes
title token css
sample
Exemplos do Framework CSS Bulma
Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS
title token css
sample

Hubs relacionados

Ferramentas de Design para Generate
Explore 19 ferramentas de design para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Design para Convert
Explore 98 ferramentas de design para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Json para Generate
Explore 33 ferramentas de json para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Pdf para Generate
Explore 10 ferramentas de pdf para fluxos de generate e encontre utilitários próximos com rapidez.

FAQ

O que é a propriedade box-shadow?

É uma propriedade CSS que adiciona efeitos de sombra ao redor da borda de um elemento.

Como funciona o raio de propagação?

O raio de propagação aumenta ou diminui o tamanho da sombra em todas as direções antes do desfoque.

Posso criar sombras internas?

Sim, basta marcar a opção 'Sombra Interna' para aplicar o efeito dentro do elemento.

O código gerado é compatível com todos os navegadores?

Sim, o código gerado utiliza a sintaxe padrão do CSS3, suportada por todos os navegadores modernos.

Como aplico a sombra no meu CSS?

Basta copiar o código gerado pela ferramenta e colá-lo na classe CSS do seu elemento HTML.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/box-shadow-generator

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
horizontal range Sim -
vertical range Sim -
blur range Sim -
spread range Sim -
color color Sim -
opacity range Sim -
inset checkbox Não -

Formato de resposta

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texto: Texto

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-box-shadow-generator": {
      "name": "box-shadow-generator",
      "description": "Gera propriedades de sombra de caixa CSS",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=box-shadow-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]