Coleção de sombras de caixa

• Cópia instantânea de CSS box-shadow: nossa coleção permite copiar qualquer valor CSS predefinido com um clique. Cada cartão mostra uma prévia ao vivo da sombra aplicada a um elemento real - sem adivinhar, sem ajustes manuais, apenas copiar e colar no seu projeto.
• Coleção de sombras de caixa online segura: a coleção online roda inteiramente no seu navegador. Nenhum dado é enviado a servidor algum - seu fluxo de design permanece totalmente privado e funciona offline depois que a página carrega.
• Mais de 40 presets em 8 categorias: explore sombras de Elevação, Soft UI (neumorfismo), Coloridas, Internas, Em camadas, Brilho, Nítidas e Minimalistas. Cada categoria cobre um padrão de design distinto para encontrar o box-shadow certo em qualquer contexto de interface.
• 100% grátis - sem cadastro: use a coleção gratuitamente, sem conta, sem plano premium e sem limites de uso. Pesquise, filtre, visualize e copie quantas sombras precisar para qualquer projeto - totalmente grátis para sempre.

• Estilo de cartões e painéis de interface: aplique a sombra de elevação certa a cartões, painéis e contêineres de conteúdo. A coleção oferece uma escala completa de elevação de XS a 2XL para você corresponder ao Material Design, Tailwind ou aos tokens do seu próprio design system.
• Profundidade de botões e CTA: adicione profundidade a botões principais e elementos de call-to-action com sombras coloridas ou em camadas. A coleção inclui sombras coloridas em índigo, azul, verde e roxo que combinam diretamente com paletas de marca comuns.
• Efeitos de brilho no modo escuro: use os presets da categoria Brilho para realces estilo neon em fundos escuros. A coleção inclui sombras de brilho em branco, índigo, ciano, verde, rosa e âmbar otimizadas para superfícies de interface no modo escuro.
• Soft UI e neumorfismo: construa interfaces neumórficas com os presets Soft UI - variantes elevadas, pressionadas, côncavas e planas para fundos claros e escuros. A coleção inclui valores prontos para os padrões neumórficos mais comuns.
• Estilo de campos e formulários: use sombras Internas e Minimalistas para campos de entrada, áreas de texto e contêineres de formulário. A coleção inclui sombras internas sutis, anéis de foco e sombras que substituem bordas para um design de formulário acessível e refinado.
• Documentação do design system: copie os valores de sombra diretamente para os arquivos de tokens do seu design system, a configuração do Tailwind ou propriedades personalizadas de CSS. A coleção oferece presets nomeados e categorizados que se encaixam bem nas convenções de nomenclatura de tokens.

A propriedade CSS box-shadow adiciona um ou mais efeitos de sombra à caixa de um elemento. Cada sombra é definida por um deslocamento (X e Y), um raio de desfoque, um raio de espalhamento opcional, uma cor e a palavra-chave opcional inset. Várias sombras podem ser sobrepostas separando-as por vírgulas, criando efeitos de profundidade que vão de uma elevação sutil a brilhos marcantes. Nossa coleção de sombras de caixa oferece mais de 40 presets prontos para você encontrar o valor box-shadow certo sem escrevê-lo do zero.

1. Explore ou pesquise: use as pílulas de filtro por categoria para explorar os presets de Elevação, Soft UI, Coloridas, Internas, Em camadas, Brilho, Nítidas e Minimalistas - ou digite na caixa de busca para encontrar uma sombra por nome, categoria ou valor CSS.
2. Visualize ao vivo: cada cartão da coleção mostra um elemento de prévia ao vivo com a sombra exata aplicada, para você ver como ficará antes de copiar.
3. Copie e use: clique no botão de copiar de qualquer cartão para copiar a declaração completa box-shadow: …;, ou clique diretamente no valor CSS para copiar apenas o valor. Cole no seu CSS, na configuração do Tailwind ou no seu arquivo de tokens de design.

• Escala de elevação: sombras de XS a 2XL seguindo as convenções de elevação do Material Design e do Tailwind para uma hierarquia de profundidade consistente.
• Soft UI / neumorfismo: sombras neumórficas elevadas, pressionadas, côncavas e planas para fundos claros e escuros.
• Coloridas e brilho: sombras nas cores da marca e efeitos de brilho neon para interfaces no modo escuro, CTAs e indicadores de status.
• Internas, nítidas e minimalistas: sombras internas para campos de formulário, sombras nítidas para designs brutalistas e sombras minimalistas para bordas e anéis de foco.

A propriedade box-shadow é suportada por todos os navegadores modernos, desde o IE9. Sombras multicamada (separadas por vírgulas) são igualmente bem suportadas. Toda a navegação, busca e cópia da coleção de sombras de caixa roda localmente no seu navegador - nenhum dado é jamais enviado a servidor algum.