Gerador / Parser de Box Shadow CSS
Opções
Estado
Inativo
Camadas
1
Visualização ao vivo
Preview card
Your box-shadow appears here
Sobre o gerador / analisador de Box Shadow CSS
Esta ferramenta ajuda você a construir visualmente valores de box-shadow CSS e a analisar strings de box-shadow existentes.
É útil para design de interface, depuração de CSS, design systems e experimentação rápida com sombras.
Como usar a ferramenta
- Insira valores de offset, blur, spread, cor e inset para gerar uma sombra.
- Ou cole uma string de box-shadow existente no campo de entrada e clique em Analisar.
- Revise a visualização ao vivo.
- Copie o valor CSS gerado quando parecer correto.
Dicas
- Valores de desfoque maiores criam sombras mais suaves.
- A propagação negativa pode fazer com que as sombras pareçam mais estreitas.
- As sombras inseridas são úteis para elementos de interface do usuário pressionados ou recuados.
- As cores RGBA são ideais quando você deseja sombras suaves e transparentes.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Codificador/Decodificador de Entidade HTML
Codifique e decodifique entidades HTML instantaneamente em seu navegador.
Codificação e Segurança
›
Preview de Markdown
Visualize Markdown e copie HTML renderizado instantaneamente.
Texto e Conteúdo
›
Preview de Meta Tags / Open Graph
Visualize snippets do Google e do Open Graph e gere meta tags.
SEO e Webmaster
›
Perguntas frequentes sobre o gerador de Box Shadow
O que é box-shadow em CSS?
Box-shadow é uma propriedade CSS usada para adicionar efeitos de sombra ao redor do quadro de um elemento.
Esta ferramenta pode analisar valores de box-shadow existentes?
Sim. Cole uma string box-shadow e a ferramenta tentará extrair suas partes.
Suporta sombras inseridas?
Sim. Você pode gerar e analisar sombras inseridas.
Posso usar cores RGBA?
Sim. RGBA funciona bem para sombras de IU mais suaves e realistas.