Gerador de gradiente CSS grátis

Use uma função de gradiente como background, por exemplo background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Aqui você escolhe o tipo, o ângulo e os pontos, e a ferramenta escreve essa linha para você copiar para a sua folha de estilo.

90deg vai da esquerda para a direita. 0deg vai de baixo para cima, 180deg de cima para baixo e 270deg da direita para a esquerda. O padrão aqui é 135deg, do canto superior esquerdo ao canto inferior direito. Você pode digitar qualquer número, inclusive valores negativos.

Digite uma cor transparente no campo de texto de um ponto, como rgba(255,255,255,0) para esmaecer até o branco transparente ou rgba(0,0,0,0) para o preto transparente. O código mantém o valor como foi digitado. O seletor de cor não consegue mostrar transparência e exibe preto no lugar.

O linear mistura as cores ao longo de uma linha reta em um ângulo. O radial as espalha a partir de um ponto central. O cônico as varre ao redor de um centro como o ponteiro de um relógio, o que combina com gráficos de pizza e círculos cromáticos. Esta ferramenta desenha gradientes radiais como um círculo centralizado.

Ainda não na ferramenta, já que a saída radial é sempre radial-gradient(circle, ...) a partir do centro. Depois de copiar, edite o código: troque circle por ellipse ou escreva circle at 30% 20% para mover o centro. Os pontos continuam os mesmos.

Não. Todos os navegadores atuais aceitam gradientes lineares e radiais sem prefixo, e os gradientes cônicos funcionam no Chrome 69, no Safari 12.1, no Firefox 83 e em versões posteriores. Esta ferramenta nunca adiciona prefixos, então a linha copiada traz apenas a sintaxe padrão.

Coloque dois pontos na mesma posição. Por exemplo, #000000 a 50% e #ffffff a 50% geram uma linha nítida em vez de uma mistura. Adicione mais pares para criar listras. O código ordena os pontos por posição, e pontos no mesmo lugar mantêm a ordem em que você os adicionou.

Não há limite. Adicionar ponto coloca um novo ponto na metade do caminho entre o primeiro ponto e o último adicionado, então arraste cada novo ponto para onde você quiser. Você pode remover pontos até restarem dois.

A ferramenta gera CSS puro, não classes do Tailwind. Cole o gradiente em um valor arbitrário usando sublinhados no lugar dos espaços, como bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], ou adicione-o ao seu tema como imagem de fundo.

Esta ferramenta cria gradientes de fundo, mas você pode reaproveitar o código para texto. Coloque a linha de background copiada no elemento de texto e depois adicione background-clip: text, -webkit-background-clip: text e color: transparent para que o gradiente apareça através das letras.

Sim. É grátis, sem conta e sem limite de uso. Suas cores e configurações ficam no seu navegador e não são salvas, então ao recarregar a página você começa do zero. No site oficial, o Google Analytics conta os cliques em Copiar CSS, nunca o gradiente em si.