Como usar
- Comece por uma predefinição ou pelo gradiente padrão.
- Clique na barra para adicionar cores; arraste os pontos para movê-los.
- Escolha linear, radial ou cônico e ajuste o ângulo ou o centro.
- Copie a declaração CSS ou a classe Tailwind.
Opções explicadas
- Linear
- As cores mudam ao longo de uma linha reta. 0° aponta para cima, 90° para a direita e 180° para baixo.
- Radial
- As cores se espalham a partir de um ponto central, em um círculo ou em uma elipse que se ajusta ao elemento.
- Cônico
- As cores giram em volta de um ponto central, como uma roda de cores ou um gráfico de pizza.
- Repetir
- Repete o padrão; coloque os pontos em um intervalo curto, como de 0% a 10%, para criar listras.
Como é o código gerado
As mesmas duas cores, escritas por cada tipo. As paradas são sempre escritas com uma posição em porcentagem:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)A versão para Tailwind envolve o mesmo valor em uma classe de valor arbitrário. Os espaços viram sublinhados e os espaços depois das vírgulas são removidos:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]Na última linha de CSS, o padrão se repete a cada 10% do elemento, o que gera listras finas. Nos gradientes cônicos, o ângulo é onde a varredura começa, e nos radiais as duas porcentagens são o centro.
Perguntas frequentes
Quais navegadores suportam esses gradientes?
Gradientes lineares, radiais e cônicos funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari, sem prefixos de fabricante.
Como faço um gradiente transparente?
Digite uma cor com canal alfa, como #00000000 para preto totalmente transparente, no campo de cor de um ponto.
Como uso a classe Tailwind?
Adicione-a à lista de classes de um elemento no Tailwind CSS 3 ou 4. Ela usa um valor arbitrário, então nenhuma configuração é necessária.
Privacidade
Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos e textos são processados no seu dispositivo e nunca são enviados aos nossos servidores.