Pular para o conteúdo

Gerador de Gradientes CSS

Crie gradientes CSS visualmente — lineares, radiais e cônicos. Ajuste cores, ângulos e paradas, depois copie o código CSS. Grátis, 100% no seu navegador.

Tipo
90°
Paradas de cor
Saída CSS
 

O que são gradientes CSS?

Os gradientes CSS permitem transições de cores suaves sem imagens. São definidos pelas funções linear-gradient(), radial-gradient() e conic-gradient() e aplicados como plano de fundo.

Tipos de gradiente

Linear — as cores transitam ao longo de uma linha reta em um ângulo definido. Radial — as cores irradiam de um ponto central para fora. Cônico — as cores são dispostas ao redor de um ponto central, ideal para gráficos de pizza e rodas cromáticas.

Paradas de cor

As paradas de cor definem onde e quais cores aparecem no gradiente. Cada parada consiste em uma cor e uma posição opcional em porcentagem. Adicionando, removendo e movendo paradas, você pode criar transições complexas.

Privacidade

Todo o processamento é executado 100% no seu navegador. Nenhum dado é enviado a servidores.