Gerador de CSS

Galeria de Gradientes CSS

Crie um conjunto polido de gradientes a partir das suas cores, compare múltiplas direções e estilos de renderização, e copie o CSS exato que você precisa para um fundo, bloco de destaque ou interface de produto.

  • Gere variações lineares, radiais e cônicas a partir de um conjunto de entrada.
  • Copie declarações CSS completas ou a função de gradiente bruta com um clique.
  • Valide as posições de parada e a entrada de cores antes de exportar qualquer coisa.
  • Alterne entre predefinições quando precisar de pontos de partida rápidos em vez de controles vazios.

Construa seu conjunto de gradientes

Escolha um tipo base, defina até quatro paradas de cor e, em seguida, gere uma galeria de variações úteis. Paradas extras vazias são ignoradas com segurança.

Usado para gradientes lineares e cônicos. Os valores são limitados de 0 a 360 graus.
Paradas de cor
Use cores hex. As posições de parada são arredondadas para porcentagens inteiras e devem permanecer em ordem crescente.

A cópia da saída usa a forma background: ...;. Os cartões de visualização também mostram a função de gradiente bruta.

O resultado em destaque reflete o seu tipo principal selecionado. Os cartões da galeria abaixo ramificam-se em direções e estilos alternativos usando os mesmos dados de parada.

6 Variações na galeria
Inteiro % Arredondamento de parada

A renderização pode variar ligeiramente entre navegadores e gradientes cônicos grandes podem mostrar listras em algumas telas. As posições de parada exportadas são limitadas entre 0 e 100 e arredondadas para porcentagens inteiras para um CSS previsível.

Compare as variações geradas lado a lado e copie a versão que se ajusta ao seu layout em vez de reconstruir as paradas manualmente.

Como funciona

O gerador pega suas paradas de cor ativas, sanitiza cada valor e constrói uma string de gradiente base. A partir daí, cria uma pequena galeria de ângulos relacionados, posicionamentos radiais e rotações cônicas para que você possa revisar alternativas realistas sem alterar a paleta subjacente.

Apenas cores hex válidas são usadas. Cores opcionais em branco são ignoradas. As posições de parada são ordenadas apenas quando os dados já são válidos; se uma parada retroceder, a página sinaliza o problema em vez de alterar silenciosamente sua entrada. Isso mantém o CSS exportado consistente com o que você digitou.

As ações de cópia tentam primeiro a API de Área de Transferência e recorrem a uma área de texto temporária quando necessário. Se a cópia não estiver disponível, o CSS permanece visível em um bloco de código selecionável para que ainda haja um caminho de exportação confiável.

"