Gerador de gradientes CSS

Gera gradientes CSS.

Saída

Como usar

Quatro passos: colar, executar, rever, copiar. Tudo fica no navegador.

Cole o conteúdo

Introduza CSS, HTML, JSON ou outro texto. Nada é enviado.

Execute a ferramenta

Clique em Converter ou Executar. O resultado aparece na hora.

Reveja a saída

Leia o código gerado e as notas antes de usar.

Copie e use

Copie o resultado e cole no seu projeto.

Sobre esta ferramenta

A ferramenta monta um gradiente linear de duas paragens, mostra-o em pré-visualização e permite copiar o CSS simples ou uma classe de fundo arbitrária do Tailwind.

Exemplo

Os valores predefinidos mostram uma passagem diagonal de azul-céu para verde.

Entrada

135deg · #0ea5e9 → #22c55e

Saída

background: linear-gradient(135deg, #0ea5e9, #22c55e);

Dica

Gradientes de marca com muitas paragens continuam mais fáceis de manter em variáveis CSS.