Gerador de gradiente CSS
Projete gradientes suaves visualmente e copie o CSS — Sem cinza enlameado no meio.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como fazer um gradiente CSS
- Escolha linear, radial ou cônica e coloque o ângulo ou o centro.
- Clique na barra para adicionar cores, arraste para posicioná-las e escolha cores.
- Copiar o CSS, Tailwind ou SVG — Ou baixe um PNG.
Sobre: Gerador de gradientes
Projete gradientes CSS lineares, radiais e cônicos visualmente.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Heróis do site e fundos
- Botões, cartões e efeitos de texto
- Papéis de parede e gráficos sociais
Dica: Escolha uma predefinição como ponto de partida e, em seguida, ajuste suas cores.
Perguntas frequentes
Por que meu gradiente parece cinza no meio?
Misturar duas cores opostas no sRGB passa pelo cinza. Escolha "OKLab — Nenhum meio cinzento" ou OKLCH — a ferramenta escreve o CSS moderno (linear-gradient(no oklab …)) mais um fallback para navegadores mais antigos.
Como eu adiciono ou movo cores?
Clique na barra de gradiente para adicionar uma cor, arraste as alças para movê-las, selecione uma para alterar sua cor, opacidade ou posição e pressione Delete stop para removê-la.
Posso baixar o gradiente como uma imagem?
Sim. — Como um PNG em 1920 × 1080, 4K, quadrado, tamanho de história ou banner, ou como um arquivo SVG.
Faz aulas de Tailwind?
Sim. — gradientes simples tornam-se bg-gradient-to-* com de/via/para classes; outros um valor arbitrário bg-[…].
Os gradientes cônicos funcionam em todos os navegadores?
Sim. — As versões atuais do Chrome, Edge, Firefox e Safari suportam gradientes lineares, radiais e cônicos.