Gerador de Box Shadow CSS
Crie valores de box-shadow em CSS de forma visual. Visualize em tempo real e copie o CSS gerado.
box-shadow: 0px 8px 16px 0px #00000033;
Como usar esta ferramenta
- 1
Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.
- 2
Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.
- 3
Pick a shadow color with the color swatch; the live preview square updates as you change any control.
- 4
Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.
O que é o Gerador de Box Shadow CSS?
A propriedade box-shadow do CSS aceita deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão e cor. É possível empilhar várias sombras para efeitos em camadas. Este gerador visual produz o CSS para qualquer combinação: útil para botões, cards e efeitos de profundidade.
Casos de uso comuns
Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.
Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.
Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.
Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.
Teaching the difference between blur and spread by dragging each slider and watching the preview react.
Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.
Perguntas frequentes
Como empilho várias sombras?▼
Qual é a diferença entre desfoque e expansão?▼
Ferramentas relacionadas
Conversor de Cores (HEX/RGB/HSL)
Converta cores entre os formatos HEX, RGB e HSL. Escolha uma cor visualmente ou insira os valores manualmente.
Gerador de Gradientes CSS
Crie gradientes CSS lineares e radiais. Escolha as cores de forma visual e copie o CSS gerado.
Gerador de Curvas de Aceleração Cubic Bezier
Crie curvas de aceleração cubic-bezier para CSS. Inclui predefinições padrão.
Gerador de Paletas de Cores
Gere paletas de cores harmoniosas a partir de qualquer cor base. Suporta esquemas complementares, análogos, triádicos e monocromáticos.
Gerador de Border Radius CSS
Crie valores complexos de border-radius em CSS de forma visual. Controle independente de cada canto.
Gerador de CSS Clamp()
Gere valores CSS fluidos e responsivos com clamp(). Escala suavemente entre tamanhos mínimo e máximo ao longo dos intervalos de viewport.