Ir para o conteúdo
OneKitly
Criar conta · Entrar

Gerador de gradientes CSS

Crie um gradiente CSS linear ou radial a partir de duas cores e um ângulo, com saída CSS e Tailwind.

Ferramentas relacionadas

Todas as ferramentas: Cores e CSS →
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 corInverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.Gerador de esquemas de corDerive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.Compressor de CSSMinifique CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos.Laboratório de CSS FlexboxExperimente flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.Gerador de CSS GridConstrua um layout CSS Grid visualmente — colunas, linhas, espaços e alinhamento — com pré-visualização ao vivo e CSS para copiar.Seletor de cor de imagemCarregue uma imagem, clique para amostrar qualquer píxel e extraia uma paleta dominante, com HEX e RGB de cada amostra.Gerador de fontes para InstagramTransforme o seu texto em dezenas de fontes Unicode prontas a copiar para a bio, legendas e comentários do Instagram.

Abre Gerador de gradientes CSS e obténs uma resposta de imediato, sem criar conta. O seu lugar é em Cores e CSS; Verificador de contraste de cor e Inversor de cor respondem às perguntas mais próximas.

Como usar

  1. Abra a ferramenta — sem registo nem instalação.
  2. Introduza os seus dados ou ajuste as opções disponíveis.
  3. Obtenha o seu resultado ao instante e copie-o ou descarregue-o.

Perguntas frequentes

O que é Gerador de gradientes CSS?

Crie um gradiente CSS linear ou radial a partir de duas cores e um ângulo, com saída CSS e Tailwind.

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.

Existe uma ferramenta para o passo seguinte?

Inversor de cor é o mais próximo a seguir a este: Inverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.

Que mais vale a pena ter aberto ao lado?

Gerador de esquemas de cor e Compressor 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.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.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çãoComo funcionam de verdade as fontes do Instagram (não são fontes)Nada é estilizado. Cada letra é trocada por outro carácter Unicode que por acaso se parece com negrito ou cursivo — daí um leitor de ecrã ler uma algaraviada e alguns aparelhos mostrarem quadrados vazios.