Crie sombras de caixa em CSS visualmente com visualização em tempo real. Controle o deslocamento, o desfoque, a propagação, a cor e várias camadas. Copie o código CSS pronto para uso instantaneamente.
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);A propriedade `box-shadow` do CSS adiciona efeitos de sombra ao redor da moldura de um elemento. Uma sombra é definida por seu deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de propagação, cor e um sinalizador opcional de recuo interno. Várias sombras, separadas por vírgulas, podem ser sobrepostas para criar efeitos em camadas, e a propriedade é compatível com todos os navegadores modernos sem prefixos de fabricante.
Ajuste os controles deslizantes e o seletor de cores para configurar cada camada de sombra. A área de visualização é atualizada em tempo real à medida que os valores são alterados. É possível adicionar e remover várias camadas de sombra de forma independente. Quando estiver satisfeito, clique em “Copiar” para obter o valor CSS completo da sombra da caixa, pronto para ser colado em uma folha de estilo.
Use as predefinições como pontos de partida para padrões comuns: sombras de cartão para componentes da interface do usuário, sombras elevadas para janelas modais, sombras suaves para criar profundidade sutil e sombras marcantes para uma estética de design plano. A opção “inset” cria sombras internas úteis para estados de botões pressionados e campos de entrada recuados.