O gerador edita visualmente gradientes lineares, radiais e cônicos e produz na hora o CSS correspondente para copiar. As paradas de cor podem ser arrastadas, criadas com um clique na área vazia e ter a cor alterada; o mínimo é de duas paradas. No gradiente linear o ângulo vai de 0 a 359°, no radial há as opções circle/ellipse e nove posições centrais, e no cônico dá para definir o ângulo inicial e a posição do centro. A página ainda oferece uma "inspiração aleatória" baseada no módulo de aleatoriedade Web Crypto, que monta esquemas análogos, complementares ou triádicos.

1. 01Na régua de paradas de cor, selecione, arraste ou crie paradas e mude a cor e a posição de 0 a 100%.
2. 02Escolha o tipo linear, radial ou cônico e ajuste o ângulo, a forma e o centro conforme o tipo.
3. 03Copie o CSS gerado; linear e radial também trazem a forma antiga com -webkit- e a primeira linha apresenta uma cor sólida de reserva.
4. 04Se quiser uma imagem, escolha uma resolução predefinida e exporte o papel de parede PNG.

• A posição das paradas de cor fica entre 0 e 100% e são exigidas no mínimo duas; ao inserir entre duas paradas, a cor inicial vem da interpolação linear entre as cores vizinhas.
• O ângulo do linear na interface vai de 0 a 359°; o radial aceita circle/ellipse e o centro é limitado a nove direções predefinidas.
• As resoluções PNG predefinidas são 1920×1080, 2560×1440, 3840×2160, 1080×1920 e 1290×2796.
• Na exportação do radial ellipse, o canvas aproxima o efeito elíptico do CSS por escala de coordenadas; a renderização CSS e os pixels exportados podem variar um pouco entre navegadores.
• O que não faz: não gera gradientes animados, não exporta SVG e não baixa paletas de bancos de imagem remotos.

As cores, o CSS e o PNG são calculados e gerados no navegador, sem pedir nada a serviços remotos de paleta ou imagem.