Gerador de CSS Gradient

Crie gradientes lineares e radiais com preview em tempo real. Copie o código CSS com um clique.

Espaço Reservado · AdSense

O que são gradientes CSS?

Gradientes CSS permitem criar transições suaves entre duas ou mais cores diretamente via CSS, sem imagens. Eles são amplamente usados em backgrounds, botões e overlays modernos.

Linear vs Radial

O linear-gradient distribui as cores ao longo de uma linha reta com um ângulo definido (0° = baixo para cima, 90° = esquerda para direita). Já o radial-gradient irradia do centro para fora em forma circular. O CSS gerado inclui o prefixo -webkit- para garantir compatibilidade com versões antigas de Safari.

Como usar esta ferramenta

Escolha o tipo de gradiente, selecione as duas cores e ajuste o ângulo (apenas para Linear). O preview atualiza instantaneamente. Clique em "Copiar" para levar o CSS para o seu projeto — já com prefixo cross-browser incluído.

Espaço Reservado · AdSense