Ir para o conteúdo
OneKitly
Criar conta · Entrar

Gerador de sombra CSS (box-shadow)

Ajusta uma sombra CSS com pré-visualização ao vivo e copia o código gerado — deslocamento, desfoque, extensão, cor, inset.

Ferramentas relacionadas

Todas as ferramentas: Cores e CSS →
Compressor de CSSMinifica CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos.Laboratório de CSS FlexboxExperimenta flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.Gerador de CSS GridConstrói um layout CSS Grid visualmente — colunas, linhas, espaços e alinhamento — com pré-visualização ao vivo e CSS para copiar.Embelezador de CSSReformata CSS minificado ou desarrumado em regras limpas e bem indentadas — ou minifica de novo.Verificador de contraste de corRácio de contraste WCAG entre texto e fundo, com aprovado/reprovado AA/AAA e uma pré-visualização.Inversor de corInverte uma cor (255 − RGB) ou obtém a complementar, em HEX/RGB/HSL/CMYK com o contraste.Gerador de esquemas de corDeriva esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.Gerador de gradientes CSSCria um gradiente CSS linear ou radial a partir de duas cores e um ângulo, com saída CSS e Tailwind.

Gerador de sombra CSS (box-shadow) usa-se gratuitamente, as vezes que quiseres, diretamente nesta página. Está arrumada em Cores e CSS no nosso catálogo, ao lado de Compressor de CSS e Laboratório de CSS Flexbox.

Como usar

  1. Abre a ferramenta — sem registo nem instalação.
  2. Introduz os teus dados ou ajusta as opções disponíveis.
  3. Obtém o teu resultado ao instante e copia-o ou descarrega-o.

Perguntas frequentes

O que é Gerador de sombra CSS (box-shadow)?

Ajusta uma sombra CSS com pré-visualização ao vivo e copia o código gerado — deslocamento, desfoque, extensão, cor, inset.

Em que casos se usa na prática?

Levar uma cor de uma ferramenta de design para uma folha de estilos, construir uma paleta em torno de uma cor de marca e verificar se o texto será legível sobre ela.

Qual é o erro mais comum?

Avaliar o contraste a olho. Duas cores que parecem distintas num monitor luminoso podem falhar claramente o rácio de acessibilidade, e é esse rácio que uma auditoria vai medir.

Em que difere Gerador de sombra CSS (box-shadow) de Compressor de CSS?

Estão próximos mas respondem a perguntas diferentes. Compressor de CSS: minifica CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos. Escolhe o que corresponde ao teu ponto de partida — ambos são gratuitos.

Existe uma ferramenta para o passo seguinte?

Laboratório de CSS Flexbox é o mais próximo a seguir a este: Experimenta flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.

Que mais vale a pena ter aberto ao lado?

Gerador de CSS Grid e Embelezador de CSS — surgem na mesma tarefa com frequência suficiente para merecerem outro separador.

De onde vêm os dados?

As conversões entre HEX, RGB e HSL são exatas. O contraste segue a fórmula de luminância relativa da WCAG 2; o CMYK depende do dispositivo, pelo que um valor no ecrã é uma aproximação do que será impresso.

Para saber mais

Todos os guias →
ExplicaçãoGradientes, bandas e porque o meio parece turvoInterpolar em sRGB faz a média de números codificados em gama: o ponto médio de vermelho para verde é #808000 quando a resposta a meia-luz é #bcbc00 — menos 57,2 % de luz. As bandas são outro problema aritmético: 8 bits dão 256 degraus, e um gradiente escuro pode ter apenas 28. Eis ambos, calculados.ExplicaçãoOs esquemas de cor são geometria numa roda — e a roda está erradaComplementar, tríade, análogo e complementar dividido são apenas rotações: some 180°, 120°, 30° ou 150° a um matiz. A aritmética é trivial. O problema é que o círculo de matizes HSL não é percetualmente uniforme — o amarelo e o azul com a mesma luminosidade HSL diferem 12,85 vezes em luminância — por isso uma paleta gerada tem de ser verificada em contraste depois.GuiaO que um minificador pode remover e o que não pode tocarA minificação tem de preservar o significado, e o interessante são os espaços que carregam significado: o combinador descendente, os espaços dentro de calc(), o intervalo entre dois elementos em linha. Medido aqui em ficheiros reais, incluindo o que o brotli já lhe ia poupar.ExplicaçãoRácio de contraste: como a WCAG o calcula realmenteO rácio WCAG é (L1 + 0,05) ÷ (L2 + 0,05), e L é a luminância relativa, não o brilho. O verde carrega 71,52 % e o azul 7,22 %, razão pela qual o azul puro sobre branco passa com 8,59:1 enquanto o cinzento médio falha com 3,95:1. Eis o cálculo inteiro, corrido de ponta a ponta.TutorialHEX vs RGB: como ler e converter coresHEX e RGB são duas notações para as mesmas cores. Eis como ler cada uma, converter entre elas e adicionar transparência.GuiaEmbelezar ou minificar: para que serve cada um e o que faz ao pesoQuatro folhas de estilo reais passadas pelo minificador, medidas em bruto e depois de gzip. Retirar todos os espaços poupou 48, 103, 104 e 147 bytes comprimidos; retirar os comentários, 57, 1 358, 2 420 e 1 042. E as cinco entradas que este minificador parte.