Criador de Gradientes.

Crie gradientes CSS lineares, radiais ou cónicos com pré-visualização ao vivo. Ajuste cores e direção, depois copie o CSS.

0%
100%

          
        

Escolhe um tipo de gradiente (linear, radial ou cónico), adiciona paragens de cor, ajusta as suas posições e vê o resultado em tempo real. A propriedade CSS background gerada está pronta para copiar e colar diretamente no teu projeto.

Como usar

Seleciona um tipo de gradiente, ajusta o ângulo (para linear/cónico), clica nas amostras de cor para as alterar e arrasta os controlos para definir as posições. Clica em + Adicionar cor para mais paragens. Copia o CSS do bloco escuro à direita.

Exemplos

Linear pôr do sol (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Brilho radial radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Roda de cores cónica conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

O que é um gradiente cónico?

Um gradiente cónico roda cores em torno de um ponto central. É útil para gráficos circulares, rodas de cores, efeitos de mostrador e qualquer design onde as cores transitam em varrimento.

Quantas paragens de cor posso adicionar?

Quantas queiras — clica em + Adicionar cor para inserir paragens adicionais. O CSS é válido independentemente de quantas paragens usas.

Ferramentas relacionadas

Privacidade e dados

Esta ferramenta funciona inteiramente no seu navegador. Nada do que escreve ou cola é enviado para qualquer servidor — todo o processamento ocorre localmente no seu dispositivo.