Configurações
#FF512F0%
#DD2476100%
Pré-visualização Ao Vivo
Saída CSS
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);

Gerador de Gradiente CSS

Crie belos gradientes CSS visualmente. Escolha estilos linear, radial ou cônico.

Como Usar

1

Escolha o Tipo

Selecione o tipo de gradiente Linear, Radial ou Cônico e ajuste o ângulo se necessário.

2

Adicionar Cores

Adicione paradas de cor, escolha suas cores e arraste os controles deslizantes para posicioná-las perfeitamente.

3

Copiar CSS

Visualize seu gradiente e clique em "Copiar CSS" para usá-lo em seu projeto instantaneamente.

Perguntas Frequentes

Qual suporte de navegador os gradientes CSS têm?

Gradientes CSS (Linear e Radial) são suportados por todos os navegadores modernos. Gradientes cônicos também são amplamente suportados em todos os principais navegadores evergreen (Chrome, Firefox, Safari, Edge).

Quantas paradas de cor posso adicionar?

Esta ferramenta permite adicionar até 5 paradas de cor para manter a interface limpa, mas o CSS suporta paradas de cor ilimitadas. Você pode gerar o código base aqui e adicionar mais manualmente se necessário.

Posso usar cores transparentes?

Atualmente, esta ferramenta usa o seletor de cores padrão que normalmente gera valores HEX. Para transparência (RGBA), você pode editar o código CSS gerado manualmente para substituir códigos HEX por valores rgba().

Esta ferramenta é gratuita?

Sim, nosso Gerador de Gradiente CSS é totalmente gratuito para usar. Não há assinaturas e você não precisa se cadastrar.

Posso salvar meus gradientes?

Atualmente, não suportamos salvar em uma conta, mas você pode copiar o código CSS e salvá-lo nos arquivos do seu projeto.

Qual é a diferença entre Linear e Radial?

Os gradientes lineares fazem a transição das cores ao longo de uma linha reta (por exemplo, de cima para baixo), enquanto os gradientes radiais irradiam de um ponto central para fora.

Como utilizo o CSS gerado?

Simplesmente copie o código da caixa CSS Output e cole-o em sua folha de estilo na propriedade `background` ou `background-image`.

Posso ajustar o ângulo de um gradiente linear?

Sim, use o controle deslizante Ângulo de rotação ou a caixa de entrada para definir a direção em graus (por exemplo, 90 graus da esquerda para a direita).

Suporta navegadores mais antigos?

O código gerado é CSS3 padrão. Para navegadores muito antigos (como o IE9), você pode precisar de prefixos de fornecedores, que esta ferramenta atualmente não adiciona automaticamente.

O que é um gradiente cônico?

Um gradiente cônico gira as cores em torno de um ponto central, como um gráfico de pizza ou uma roda de cores. É útil para criar padrões e gráficos interessantes.