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

Um gerador de gradiente CSS entrega um valor pronto para colar, como linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), depois que você escolhe as cores e o ângulo. É um bom ponto de partida. Mas um gradiente CSS é curto o bastante para escrever à mão em menos de um minuto, e é no código escrito à mão que moram as melhorias: uma terceira parada, 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 seu.

As quatro partes de todo 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 seu próprio guia: gradientes lineares, gradientes radiais e gradientes cônicos.

Receitas de gradiente para copiar

Estas foram escritas à mão, não geradas, e cada uma usa uma ideia que um gerador básico raramente oferece: uma luz fora do centro, três paradas em vez de duas ou um espaço de cor escolhido. Clique em qualquer uma para copiar.

Como limpar o código de um gerador

Cole o resultado de um gerador antigo e você pode receber cinco linhas onde uma basta. Gradientes com prefixo e o filtro do Internet Explorer são desnecessários há anos; eles pesam o código e, no caso da sintaxe antiga -webkit-, usam outro sistema de ângulos que confunde quem for editar 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 próprio navegador também é um bom gerador. Abra as ferramentas de desenvolvedor, selecione o elemento e clique em qualquer amostra de cor dentro do gradiente no painel Styles: aparece um seletor de cor para aquela parada, e você edita ângulos e porcentagens ali mesmo enquanto a página se atualiza ao vivo. Depois copie o valor final de volta para a folha de estilos. Para ajustar um gradiente com conteúdo real, isso supera qualquer ferramenta avulsa, porque você o vê atrás do seu título de verdade.

Cinco ajustes que superam qualquer controle deslizante

1. 1

   Acrescente uma parada no meio

   Duas paradas dão uma rampa reta. Uma terceira cor por volta de 50 a 60 por cento traz profundidade e permite controlar onde a mudança acontece.

2. 2

   Escolha o espaço de cor

   Acrescente in oklab para manter limpas as misturas entre cores distantes, ou in oklch para deixar o matiz viajar. Interpolação de gradientes mostra a diferença.

3. 3

   Tire a luz do centro

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

4. 4

   Sobreponha dois ou três gradientes

   Separe vários valores por vírgula em background-image. Brilhos radiais sobre uma base linear ficam muito mais ricos que um gradiente só; os gradientes mesh em CSS levam isso adiante.

5. 5

   Acrescente um pouco de granulação

   Uma camada leve de ruído esconde o banding em gradientes grandes e escuros. O código está em 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%);
}

Como transformar um gradiente num token reutilizável

Quando o gradiente estiver certo, dê um nome a ele. Uma propriedade personalizada guarda o valor inteiro, então botões, banners e o hero podem compartilhá-lo, e um redesign mexe numa linha só. Variáveis CSS para temas mostra 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

Geradores e CSS escrito à mão têm o mesmo limite: o resultado é uma lista de paradas que qualquer pessoa pode ler na sua folha de estilos e reutilizar. Para detalhes de interface, tudo bem. Para o fundo pelo qual as pessoas reconhecem você, no site e em cada post, talvez você queira 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 sobrepostos, luz, granulação e movimento, renderizados ao vivo em qualquer tamanho, com exatamente um dono por vez. Você pode criar com qualquer Mark não reservado de graça e buscar no Mercado por palavras de cor para encontrar um parecido com o gradiente que estava tentando escrever.