Gerador de gradientes CSS: escreve à mão ou com ferramentas

Um gerador de gradientes CSS dá-te um valor de gradiente para colar, como linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), depois de escolheres cores e um ângulo. É um bom ponto de partida. Mas um gradiente CSS é curto o bastante para se escrever à mão em menos de um minuto, e é no código escrito à mão que estão as melhorias: uma terceira paragem, um espaço de cor melhor, uma segunda camada. Esta página mostra como ler o resultado de um gerador, limpá-lo e escrever o teu.

As quatro partes de cada gradiente CSS

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Cada tipo tem o seu guia: gradientes lineares, gradientes radiais e gradientes cónicos.

Receitas de gradientes para copiar

Estas são escritas à mão e não geradas, e cada uma usa uma ideia que um gerador básico raramente dá: uma luz descentrada, três paragens em vez de duas ou um espaço de cor escolhido. Clica em qualquer uma para a copiar.

Como limpar o resultado de um gerador

Cola o resultado de um gerador antigo e podes receber cinco linhas onde uma chega. Os gradientes com prefixo e o filtro do Internet Explorer são desnecessários há anos; pesam e, no caso da antiga sintaxe -webkit-, usam um sistema de ângulos diferente que confunde quem edita depois.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

O teu navegador também é um gerador decente. Abre as ferramentas de programador, seleciona o elemento e clica em qualquer amostra de cor dentro do gradiente no painel Styles: recebes um seletor de cor para essa paragem e podes editar ângulos e percentagens no local enquanto a página se atualiza em direto. Copia o valor final para a tua folha de estilos. Para afinar um gradiente contra conteúdo real, isto vence qualquer ferramenta autónoma, porque o vês por trás do teu título verdadeiro.

Cinco edições que vencem qualquer cursor

1. 1

   Acrescenta uma paragem intermédia

   Duas paragens dão uma rampa reta. Uma terceira cor a cerca de 50 a 60 por cento acrescenta profundidade e deixa-te controlar onde se dá a mudança.

2. 2

   Escolhe o espaço de cor

   Acrescenta in oklab para manter limpas as misturas entre cores distantes, ou in oklch para deixar o tom viajar. A interpolação de gradientes mostra a diferença.

3. 3

   Tira a luz do centro

   Troca um gradiente linear por radial-gradient(circle at 80% 20%, ...) para que a cor mais brilhante venha de um canto, como uma fonte de luz.

4. 4

   Empilha dois ou três gradientes

   Separa vários valores por vírgulas em background-image. Brilhos radiais sobre uma base linear parecem muito mais ricos do que um só gradiente; os gradientes de malha em CSS levam isto mais longe.

5. 5

   Acrescenta um pouco de grão

   Uma camada ténue de ruído esconde as bandas em gradientes grandes e escuros. O código está na textura de ruído em CSS.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Transformar um gradiente num token reutilizável

Quando um gradiente estiver certo, dá-lhe um nome. Uma propriedade personalizada guarda o valor inteiro, por isso botões, banners e o herói podem partilhá-lo, e um redesenho toca numa só linha. As variáveis CSS para temas mostram como trocar tokens de gradiente por marca ou modo.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Quando um gerador não é a ferramenta certa

Os geradores e o CSS escrito à mão partilham o mesmo limite: o resultado é uma lista de paragens que qualquer pessoa pode ler na tua folha de estilos e reutilizar. Serve para pormenores de interface. Para o fundo pelo qual as pessoas te reconhecem, no teu site e em todas as publicações, podes querer algo mais rico e mais difícil de copiar. O conselho mais amplo está em como usar um gerador de gradientes.

Os Marks do Gradiently vão além do que o CSS consegue descrever: materiais empilhados, luz, grão e movimento, desenhados em direto a todos os tamanhos, com exatamente um dono de cada vez. Podes desenhar com qualquer Mark por reservar, de graça, e pesquisar no Mercado por palavras de cor para encontrar um próximo do gradiente que tentavas escrever.