As ferramentas de desenvolvimento que você usa todos os dias, tudo em um só lugar.

Conversores, formatadores, hashes, validadores e os pequenos utilitários que você fica reabrindo permanecem juntos em vez de se perderem entre as abas.

GitHub

/ Ferramentas

■

/ Buscador de ferramentas

109 ferramentas

/ Gerador de Box Shadow

Predefinições

Sombras (2/5)

Sombra 1

Interna

Horizontal: 0px

Vertical: 4px

Desfoque: 6px

Expansão: -1px

Cor

Opacidade: 10%

Sombra 2

Interna

Horizontal: 0px

Vertical: 2px

Desfoque: 4px

Expansão: -2px

Cor

Opacidade: 10%

Fundo da prévia

Prévia

Código CSS

Valor arbitrário Tailwind

/ Ferramenta selecionada

■

Gerador de Box Shadow - ferramenta de geração gratuita

Gerador visual de box-shadow CSS com suporte a múltiplas sombras

■ 01

O que é CSS Box Shadow?

A propriedade CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. Você pode definir múltiplas sombras separadas por vírgulas. Cada sombra é descrita por deslocamentos horizontal e vertical, raio de desfoque e espalhamento, cor e…

■ 02

Como funciona?

Box shadows são definidas por vários valores: deslocamento horizontal (positivo move para a direita), deslocamento vertical (positivo move para baixo), raio de desfoque (maior significa mais desfoque), raio de espalhamento (positivo expande, negativo encolhe) e c…

■ 03

Casos de exemplo

Abrange Sombra sutil, Elevação média e Sombra interna, para você comparar entradas e saídas comuns rapidamente.

/ Ferramentas relacionadas

/ Código

■

Código-fonte da ferramenta selecionada, mostrado aqui ao lado da versão ao vivo à direita.

/ Código-fonte

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;