Design

Gerador de Gradiente CSS

Crie gradientes CSS visualmente.

Como usar

Escolha uma predefinição ou crie do zero: adicione paradas de cor, arraste posições, alterne entre linear, radial e cônico. Copie CSS ou o snippet de classe Tailwind.

Perguntas frequentes

Quais tipos de gradiente são compatíveis?

Linear (qualquer ângulo), radial (círculo a partir do centro) e cônico (círculo cromático). Cada tipo aceita vários pontos de cor com posições arrastáveis.

Como usar o CSS?

Copie a linha background gerada para a sua folha de estilos ou cole-a em um valor arbitrário do Tailwind, como bg-[linear-gradient(...)].

Posso começar com uma predefinição?

Sim — clique em qualquer uma das 12 predefinições (pôr do sol, oceano, foco radial, arco-íris cônico e mais) e ajuste os pontos e ângulos.

Última atualização: