Gerador de gradiente CSS

Defina as cores e o ângulo e ele escreve o linear-gradient do CSS. Mova as paradas de cor para controlar onde a transição acontece e cole o resultado direto.

🎨 Tudo roda no seu navegador. Sem instalar nada, sem cadastro.

Cor inicial

Cor final

Adicionar uma cor no meioRadial, se espalhando do centro

Ângulo135°

Presets

background: linear-gradient(135deg, #8b5cf6, #0ea5e9);

Ao colocar texto sobre um gradiente, verifique o contraste tanto no ponto mais claro quanto no mais escuro. Se ajustar só para um lado, o texto desaparece no outro.

O que esta ferramenta faz

Duas ou três cores com posição de parada
Angular ou radial
Copie o CSS na hora
Referência de classes Tailwind

Outras ferramentas de cor

Gerador de box-shadow CSSAjuste a sombra vendo o resultado Gerador de paletas de coresTire as cores que combinam com uma cor base, por regra Gerador de tons de corTransforme uma cor numa escala 50–900 Misturador de coresEncontre a cor que fica entre duas

As cores podem aparecer um pouco diferentes conforme a sua tela e o perfil de cor dela.