Gerador de gradiente CSS: linear, radial, cônico (e a armadilha angular)

Perdi a maior parte de uma tarde para um gradiente uma vez Não é complicado - um fundo de herói em uma página de marketing WP Adminify, azul da marca desaparecendo em laranja da marca, diagonal Eu escrevi linear-gradient(45deg, #4466EE, #E99537) E foi do jeito errado. então eu tentei -45deg. Também errado. então 135deg, o que estava certo, e segui em frente sem entender o porquê, qual é o pior resultado possível porque garante que você errará novamente.

A razão é que os ângulos de inclinação do CSS não são os ângulos que você aprendeu na aula de matemática. 0deg pontos para cima, e o ângulo aumenta sentido horário. Na trigonometria - e no SVG, e na tela - 0 pontos à direita e os ângulos aumentam no sentido anti-horário Duas convenções diferentes, uma de aparência idêntica deg unidade e nenhuma mensagem de erro quando você escolhe a errada. Está escrito claramente em Módulo de imagens CSS nível 3, e eu simplesmente nunca tinha lido.

Esse é o caso de um gerador visual em uma anedota. o gerador de gradiente no Toolz.dev oferece uma visualização ao vivo, batentes de cores arrastáveis e CSS copiável para gradientes lineares, radiais e cônicos - portanto, a pergunta do ângulo responde a si mesma em vez de custar uma tarde.

tl;dr: em CSS, 0deg aponta para o top e os ângulos correm sentido horário, então to right iguais 90deg E uma diagonal superior esquerda → direita inferior direita é 135deg, não 45deg. usar gerador de gradiente para vê-lo em vez de adivinhar, e o seletor de cores Para escolher paradas que não ficam enlameadas no meio. gradientes são <image> valores - em qualquer lugar que você possa usar url(), você pode usar um gradiente. Todos do lado do cliente, sem inscrição.

O que é um gradiente de CSS, tecnicamente?

Um gradiente não é uma cor. é um imagem. Esse único fato explica a maior parte da sintaxe.

por Nível 3 de imagens CSS, linear-gradient(), radial-gradient(), e suas variantes repetidas produzem um valor do tipo <image>. Isso significa que em qualquer lugar que as especificações aceitem url('photo.jpg'), ele também aceita um gradiente: background-image, border-image, list-style-image, mask-image, content. Isso também significa que os gradientes têm Sem dimensões intrínsecas- eles se esticam para preencher a caixa em que você os colocou, e é por isso que o mesmo gradiente parece diferente em um botão de 200 px e um herói de 1400 px.

conic-gradient() veio depois e mora em Nível 4 de imagens CSS, juntamente com a sintaxe de espaço de interpolação-colorir, vou ver abaixo.

Qual é a diferença entre linear, radial e cônico?

Gradientes lineares - e a convenção de ângulos

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

Comprometa-se com a memória e você nunca repetirá minha tarde:

Há mais uma sutileza com as palavras-chave de canto. to bottom right faz não simplesmente significa 135deg. A especificação o define como um ângulo escolhido para que a linha de gradiente seja perpendicular à outro diagonal - que significa em uma caixa não quadrada, to bottom right e 135deg produzir resultados visivelmente diferentes. Em um quadrado, eles são idênticos. Esse é o tipo de coisa que você percebe às 23h quando um cartão parece certo no design e está errado em uma coluna estreita.

Gradientes radiais - onde vivem as palavras-chave de tamanho

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

As palavras-chave de quatro tamanhos decidem onde o final As terras param as cores, medidas a partir do centro:

• closest-side- a borda mais próxima da caixa
• farthest-side- a borda mais distante
• closest-corner- o canto mais próximo
• farthest-corner- o canto mais distante (este é o padrão)

Altere a palavra-chave e o gradiente parece um gradiente diferente. Este é o motivo mais comum para um gradiente radial "não fazer o que eu quero"; e é muito mais rápido clicar nas quatro opções do gerador de gradiente do que raciocinar sobre isso.

Gradientes cônicos - tortas, rodas e anéis

Cores de varredura cônica em volta o centro, começando às 12h e no 39; relógio e indo no sentido horário (mesma convenção que linear - pelo menos ele e no 39; consistente).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

que mask A linha é o truque por trás de cada indicador de progresso do donut que você já viu, e são cerca de seis linhas de CSS em vez de uma biblioteca SVG.

Como eu controle onde as cores pousam?

paradas de cor

Dê uma posição STOP uma e você controla a transição. Dê uma parada dois posições e você obtém uma vantagem difícil - sem nenhuma interpolação.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

Dicas de interpolação (o ponto médio que você não sabia que poderia se mover)

uma porcentagem simples entre Duas cores movem o ponto médio 50/50. Esta é a parte mais subutilizada da sintaxe gradiente que conheço:

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

Use-o para os Scrims de imagem. um to top, rgba(0,0,0,.8), transparent A sobreposição geralmente come muito da foto; solte um 35% Dica e a escuridão cai em direção ao fundo onde está a legenda.

Repetição de gradientes para padrões

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

Uma linha, sem arquivo de imagem, infinitamente escalável Apenas don & #39; t aplicá-lo a um elemento de página inteira e, em seguida, perguntar por que rolar gagueja em um Android de gama média - repintar um grande gradiente de repetição durante a rolagem é um trabalho real para o compositor.

Por que meu gradiente parece enlameado no meio?

Duas causas separadas, e as pessoas as confundem constantemente.

Causa 1: Interpolação sRGB

Por padrão, os navegadores combinam paradas de gradiente em sRGB, canal por canal. Para duas cores próximas uma da outra na roda - azul a roxo, laranja a vermelho - tudo bem. Para cores complementares produz uma faixa cinza morta no meio, porque o ponto médio matemático de duas cores sRGB opostas é Aproximadamente cinza. Azul a amarelo é o ofensor clássico.

O nível 4 de imagens CSS corrige isso, permitindo que você nomeie o espaço de interpolação:

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch Mantém a leveza percebida e o croma estável em toda a mistura. Suporte ao navegador para o in <colorspace> A sintaxe é boa no Chrome, Safari e Firefox atuais, mas se você precisar oferecer suporte a navegadores mais antigos, o fallback é a correção manual antiga: adicione uma parada intermediária e guie a mistura você mesmo.

Causa 2: desbotamento para transparent- e meu segundo erro

transparent é definido como rgba(0, 0, 0, 0). transparente negro. Se os navegadores interpolassem ingenuamente, linear-gradient(#E99537, transparent) deslizaria progressivamente mais escuro, laranja mais acinzentado a caminho de nada.

Os navegadores modernos não fazem isso - a especificação requer interpolação pré-multiplicado Alpha Space, que evita totalmente o problema. Mas o WebKit mais antigo não, e eu enviei um herói em um site de cliente que parecia limpo na minha máquina e parecia uma mancha suja no iPad de dois anos. A versão à prova de balas, que não custa nada e ainda funciona em todos os lugares:

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

Eu ainda escrevo dessa maneira fora do tecido cicatricial.

O que devo ficar atento com a acessibilidade?

O contraste deve ser mantido em todo o gradiente

WCAG 2.1 SC 1.4.3 Requer 4,5:1 para texto normal e 3:1 para texto grande (18pt ou 14pt em negrito). Um gradiente significa que sua cor de fundo é diferente em cada pixel, portanto, o requisito deve ser atendido em relação ao na pior das hipóteses ponto - o patch mais claro se o seu texto for branco, o mais escuro se for preto & #39; s.

O padrão confiável é parar de tentar tornar o gradiente legível e colocar uma tela em camadas:

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

Agora, o texto fica em um intervalo escuro conhecido, independentemente do que o gradiente abaixo esteja fazendo. Verifique as pontas com o seletor de cores antes de enviar - o passo a passo de contraste completo, incluindo a cor da marca que enviei às 2h38min1s, está no guia de seleção de cores.

O texto gradiente é um alçapão

Este foi o que realmente me queimou em uma página de destino de produção:

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

se background-clip: text does't se aplica por qualquer motivo - um navegador antigo, uma extensão bloqueando imagens de fundo, uma folha de estilo de impressão - você'ficou com color: transparent e um Título invisível. O texto ainda está no DOM, então um leitor de tela o lê alegremente e você não tem ideia de que algo está errado. usar @supports para portá-lo:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

Cor sólida Por padrão, o gradiente como um aprimoramento. É assim que deveria ter sido escrito na primeira vez.

Gradientes animados precisam de uma escotilha de escape de movimento

Você não pode fazer a transição gradiente cores- o navegador ganhou't interpolar entre dois <image> valores. O que as pessoas animam em vez disso é background-position Em um gradiente de grandes dimensões:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

Esse último bloco não é opcional. O movimento contínuo do fundo é um gatilho documentado para distúrbios vestibulares e honras prefers-reduced-motion são três linhas.

(A alternativa moderna é registrar uma propriedade personalizada com @property Portanto, seu tipo é conhecido e portanto Animavel e depois usando-o dentro do gradiente. Está limpo, é compatível com navegadores atuais e ainda vale a pena ter o guarda de movimento reduzido.)

Como faço para construir um com a ferramenta?

1. abra o gerador de gradiente.
2. Escolha um tipo - linear, radial ou cônico.
3. Clique em uma parada para mudar sua cor; arraste-a para mover sua posição. Clique na barra para adicionar uma parada; arraste-a para removê-la.
4. Para linear, arraste o ângulo. Observe o número: é aqui que o 0deg-Is-Up Convention deixa de ser abstrato.
5. Para Radial, passe o ciclo das palavras-chave de quatro tamanhos e observe o que muda. É a maneira mais rápida de construir a intuição para eles.
6. Copie o CSS.

Duas cores geralmente é a resposta certa. Cada gradiente que me arrependi teve cinco paradas.

Gradientes que valem a pena roubar

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

Alimente as cores da sua marca em seletor de cores primeiro, pegue os valores HSL, depois varie a leveza em vez da tonalidade - isso e #39; como você obtém paradas que se misturam de forma limpa em vez de lutar.

Perguntas frequentes

Por que meu gradiente de CSS está indo na direção errada?

Como os ângulos de gradiente CSS começam na top e aumentar sentido horário, ao contrário de trigonometria, SVG ou tela, que começam à direita e vão no sentido anti-horário. to right é 90deg, to bottom é 180deg, e uma diagonal superior esquerda para a direita inferior direita é 135deg, não 45deg.

eu ainda preciso -webkit- Prefixos para gradientes de CSS?

não para linear-gradient(), radial-gradient(), ou conic-gradient()- todos os três funcionam sem prefixo em todos os navegadores atuais. O único lugar onde o prefixo ainda ganha é -webkit-background-clip: text Para texto gradiente, onde o Safari mais antigo precisa dele. Envie ambas as declarações para lá.

Posso animar um gradiente CSS?

Não o valor do gradiente em si - um gradiente é um <image>, e o navegador não irá interpolar entre duas imagens. A solução padrão é tornar o gradiente muito maior que sua caixa (background-size: 600% 600%) e animar background-position. A abordagem moderna registra uma propriedade personalizada com @property Portanto, ele tem um tipo conhecido e se torna animável dentro do gradiente. De qualquer forma, guarde-o com prefers-reduced-motion.

Por que meu gradiente parece cinza ou enlameado no meio?

Quase sempre interpolação sRGB entre cores que ficam opostas uma à outra na roda - azul a amarelo é o clássico Seu ponto médio sRGB genuinamente está próximo do cinza. Corrija-o nomeando um espaço de interpolação melhor, linear-gradient(in oklch, to right, blue, yellow), ou adicionando uma parada intermediária para orientar a mistura você mesmo.

Por que o desbotamento transparent Parece sujo?

transparent é definido como rgba(0, 0, 0, 0)- transparente negro. Os navegadores atuais interpolam no espaço alfa pré-multiplicado, portanto, isso não é mais um problema, mas o WebKit mais antigo arrastou o gradiente por meio do cinza ao sair. Se você suporta dispositivos antigos, escreva explicitamente a versão com alfa zero de sua própria cor: rgba(233, 149, 55, 0) em vez de transparent.

Como faço uma borda gradiente?

Duas opções. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; é uma linha, mas silenciosamente mata border-radius. Se você precisar de cantos arredondados, coloque dois fundos com diferentes background-clip e background-origin valores ou coloque o gradiente em um pseudo-elemento atrás da caixa.

Os gradientes de CSS são ruins para o desempenho?

Um gradiente estático é barato - mais barato do que baixar uma imagem equivalente, e ele escala para qualquer tamanho de graça Os custos aparecem quando um grande gradiente tem que ser repintado Repetidamente: um gradiente repetido de página inteira durante a rolagem ou vários gradientes em camadas sob um backdrop-filter. Se uma página parece pegajosa no celular, essa é a primeira coisa que eu faria para verificar no DevTools' Paint Profiler.

Quantas paradas de cor um gradiente deve ter?

Dois, na maioria das vezes. Três quando você deseja orientar a mistura por meio de uma tonalidade específica. Além disso, você geralmente está buscando algo que um gradiente de malha (vários radiais posicionados) se sai melhor, e cada parada extra é mais uma coisa que pode parecer errada na tela de outra pessoa.

Como faço para fazer um fundo gradiente em CSS?

defina o background (ou background-image) propriedade para uma função de gradiente. background: linear-gradient(to right, #4466EE, #E99537); Pinta uma mistura da esquerda para a direita sem nenhum arquivo de imagem. radial-gradient() e conic-gradient() Siga o mesmo padrão para misturas circulares e varridas. Como o resultado é gerado em vez de baixado, ele permanece nítido em qualquer tamanho.

Como crio texto gradiente em CSS?

Coloque o gradiente background, depois defina background-clip: text (com o -webkit- prefixo para o Safari) e color: transparent, então as letras são preenchidas pelo gradiente em vez de uma cor sólida. Mantenha o texto real na marcação em vez de assá-lo em uma imagem, para que ele permaneça selecionável e legível por leitores de tela.

Embrulhando

Gradientes são um dos poucos recursos CSS que lhe dão riqueza visual real para custo de rede zero - sem solicitação de imagem, sem problemas de relação de aspecto, independente de resolução por construção A sintaxe é pequena As armadilhas são específicas e cognoscíveis: a convenção de ângulo, as palavras-chave de tamanho radial, a lama sRGB e o alçapão de cabeçalho invisível em texto gradiente.

Construa-os onde você pode vê-los. o gerador de gradiente É gratuito, é executado inteiramente em seu navegador e copia CSS limpo. Emparelhe-o com o seletor de cores Para paradas que mantêm seu contraste, e o Minificador de CSS Quando você estiver pronto para inline-o. O restante da prateleira de front-end está na Guia de ferramentas de produtividade do desenvolvedor.