# Gerador de Sombra de Caixa CSS

Gera propriedades de sombra de caixa CSS

> Página canônica: https://elysiatools.com/pt/tools/box-shadow-generator

- **Categoria:** Design

- **Palavras-chave:** css, sombra-caixa, sombra, gerador, estilo

## 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.

## Entradas

- **Deslocamento Horizontal (px)** (range)
- **Deslocamento Vertical (px)** (range)
- **Raio de Desfoque (px)** (range)
- **Raio de Propagação (px)** (range)
- **Cor da Sombra** (color): #000000
- **Opacidade** (range)
- **Sombra Interna** (checkbox)

## 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.

## Perguntas frequentes

### 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.

## Ferramentas relacionadas

- [Gerador de Animação CSS](https://elysiatools.com/pt/tools/animation-generator): Gera quadros-chave e propriedades de animação CSS
- [Gerador de Filtro de Fundo CSS](https://elysiatools.com/pt/tools/backdrop-filter-generator): Gera propriedades de filtro de fundo CSS para efeitos de vidro fosco
- [Gerador de Raio de Borda CSS](https://elysiatools.com/pt/tools/border-radius-generator): Gera propriedades de raio de borda CSS
- [Gerador de Caminho de Recorte CSS](https://elysiatools.com/pt/tools/clip-path-generator): Gera propriedades de caminho de recorte CSS para formas personalizadas
- [Gerador de Filtros CSS](https://elysiatools.com/pt/tools/css-filter-generator): Gera propriedades de filtro CSS
- [Gerador de Transformação CSS](https://elysiatools.com/pt/tools/transform-generator): Gera propriedades de transformação CSS
- [Gerador de Gradiente de Cores](https://elysiatools.com/pt/tools/color-gradient-generator): Gera gradientes de cores suaves entre múltiplas cores com passos e formatos personalizáveis
- [Gerador de Sombras de Cor](https://elysiatools.com/pt/tools/color-shade): Gere variações mais escuras de uma cor adicionando preto, criando sombras ricas para profundidade e contraste no design

## Exemplos

- [Amostras CSS](https://elysiatools.com/pt/samples/css-viewer-samples): Arquivos de amostra para o visualizador CSS no navegador
- [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/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
- [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise
- [Exemplos do Framework CSS Milligram](https://elysiatools.com/pt/samples/milligram): Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes

## Conteúdo relacionado

- [Fluxo de sistema de cores e efeitos CSS](https://elysiatools.com/pt/hubs/design-generate): Extrair uma paleta, construir relacoes acessiveis, gerar tokens e aplicar efeitos CSS coerentes em estados reais de interface.