CSS Box-Shadow Builder
Understand CSS Box-Shadow Builder
Monta declarações CSS de box-shadow a partir de controles de deslocamento, desfoque, expansão, cor e inset, com suporte a empilhar várias camadas.
How it works
A sintaxe é `box-shadow: [inset] deslocamento-x deslocamento-y desfoque expansão cor`. Os deslocamentos movem uma cópia da caixa do elemento; a expansão aumenta ou reduz essa cópia antes de ela ser desfocada; o desfoque então suaviza a borda ao longo de aproximadamente a distância indicada, centrado na borda, de modo que cerca de metade cai dentro da forma e metade fora. Várias sombras são separadas por vírgula e pintadas da frente para trás, então a primeira da lista fica por cima — e é por isso que profundidade realista vem de empilhar uma sombra pequena e fechada sobre uma grande e difusa, e não de um único desfoque grande.
When to use it
- Construir uma escala de elevação para um design system, em que cada nível é um par consistente de sombras empilhadas
- Criar uma sombra interna para um botão pressionado, um recuo ou um campo de entrada
- Desenhar uma borda fina com uma sombra de expansão e desfoque zero, que não afeta o layout como uma borda de verdade
- Reproduzir uma sombra de um arquivo de design sem decodificar à mão os valores de deslocamento e desfoque
Watch out for
- O box-shadow segue a caixa de borda e o border-radius dela, não a arte que está dentro. Para um PNG transparente ou um ícone SVG você quer `filter: drop-shadow()`, que acompanha a silhueta do canal alfa.
- Sombras inset são desenhadas dentro da caixa de padding e são cortadas pela borda. Uma sombra inset em um elemento sem padding pode ficar quase toda escondida atrás do próprio conteúdo.
- Raios de desfoque grandes são caros de pintar e são recalculados a cada repaint. Uma dúzia de sombras de 60px em uma lista com rolagem tem custo mensurável na taxa de quadros em dispositivos modestos.
- Uma sombra em um elemento recortado desaparece. Tanto clip-path quanto `overflow: hidden` em um ancestral cortam a sombra fora, porque a sombra é pintada fora da caixa do elemento.
Frequently Asked Questions
Como aplicar box shadow no CSS?
Acrescente box-shadow: deslocamento-x deslocamento-y raio-de-desfoque cor a qualquer elemento. Exemplo: box-shadow: 0 4px 12px rgba(0,0,0,0.15) cria uma sombra suave. Use o construtor para ajustar os controles deslizantes e copiar a propriedade CSS exata — sem precisar decorar a sintaxe.
Como criar uma box shadow no CSS?
A sintaxe é: box-shadow: deslocamento-horizontal deslocamento-vertical raio-de-desfoque raio-de-expansão cor. Um deslocamento vertical positivo projeta a sombra abaixo do elemento; negativo, acima. O raio de desfoque controla a suavidade (0 = borda dura). Acrescente a palavra-chave "inset" antes dos deslocamentos para uma sombra interna.
Dá para sobrepor várias box shadows?
Sim — separe vários valores de box-shadow por vírgula: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08). As sombras são renderizadas da frente para trás (a primeira fica por cima). Sobrepor uma sombra pequena e nítida a uma grande e difusa cria uma profundidade de material realista.
How to Use CSS Box-Shadow Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.