Ir para o conteúdo
OneKitly
Criar conta · Entrar

Gerador de gradientes CSS

Cria 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 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 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.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.Seletor de cor de imagemCarrega uma imagem, clica para amostrar qualquer píxel e extrai uma paleta dominante, com HEX e RGB de cada amostra.

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. 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 gradientes CSS?

Cria 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: Inverte uma cor (255 − RGB) ou obtém 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 Gerador de sombra CSS (box-shadow) — 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.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.