Gerador de gradiente CSS

Gerador de gradiente CSS para fundos lineares, radiais e cônicos

A página abre com um gradiente de três cores e o CSS dele já escrito nas caixas de saída. Mude uma parada e as duas caixas acompanham na hora. Este gerador de gradiente CSS cobre as três funções de gradiente do navegador, linear-gradient(), radial-gradient() e conic-gradient(), além da variante repeating- de cada uma.

Cinco passos da primeira parada à regra copiada

1. Escolha Linear, Radial ou Cônico. O linear recebe um ângulo de 0 a 360 graus. O radial recebe uma forma, círculo ou elipse, e um centro. O cônico recebe um ângulo inicial e um centro.
2. Edite as paradas de cor. Cada parada tem um seletor de cor, um campo hexadecimal, uma posição em porcentagem e um alfa de 0 a 100. Os botões de seta movem uma parada, a cruz a remove, e Adicionar parada acrescenta uma nova.
3. Aperte Espaçar igualmente para distribuir as paradas de 0 a 100, ou Inverter paradas para virar o gradiente. Uma predefinição preenche o editor inteiro se você preferir começar de um exemplo.
4. Confira a prévia grande. Ela fica sobre um tabuleiro de xadrez, então as partes transparentes aparecem.
5. Aperte Copiar acima da caixa de que precisa.

Bordas duras, listras e paradas fora de ordem

Duas paradas na mesma posição criam uma borda dura em vez de uma mistura. A predefinição Listras usa isso: faixas escuras e âmbar de 10% cada, repetidas porque a chave de repetição está ligada e a última parada fica em 20%. Essa última posição é o comprimento de uma repetição. Mova-a para 100% e a repetição desaparece.

A ferramenta nunca ordena as suas paradas. Se uma parada está antes de uma anterior, o navegador a leva para a posição anterior, o que cria outra borda dura. As posições que você digita são limitadas a 0 a 100.

O que as duas caixas de saída contêm

A primeira caixa traz uma linha, background: ...;. A segunda traz duas linhas: um background-color igual à primeira parada e um background-image com o gradiente. A cor é a reserva para um navegador que não consiga interpretar o gradiente. Paradas opacas são escritas como #rrggbb. Uma parada com alfa abaixo de 100 vira rgb(0 0 255 / 50%). Gradientes radiais e cônicos escrevem o centro como at 50% 50%. Nenhuma palavra-chave de tamanho é escrita, então vale o padrão do navegador, farthest-corner.

O que o gerador não faz

As cores são só hexadecimais: #rgb ou #rrggbb. Nomes de cores, hsl() e hexadecimal de oito dígitos não são lidos, e um valor ruim mostra um erro enquanto a última cor válida permanece. Há uma única camada de gradiente, sem lista de fundos, sem dicas de cor entre paradas e sem tamanho radial personalizado. Um gradiente tem de 2 a 8 paradas.

Nada sai da aba

A prévia é definida com uma propriedade de estilo em um elemento da página. Nenhuma requisição é enviada quando você edita ou copia, e nada é guardado, então recarregar traz de volta o gradiente inicial. Os botões de copiar escrevem na sua área de transferência. Não há download de arquivo.

Perguntas frequentes (FAQ)