Gerador de Gradientes CSS
Crie lindos gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código com um clique
Pré-visualização ao vivo
Tipo de gradiente
Pontos de cor
Predefinições
Código CSS
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Tudo é gerado localmente no seu navegador. Nada é enviado a um servidor.
Sobre esta ferramenta
Este gerador de gradientes CSS permite projetar misturas de cores suaves de forma visual e copiar CSS pronto para colar com um clique. Escolha um gradiente linear, radial ou cônico, adicione quantos pontos de cor quiser e ajuste a cor de cada ponto com um seletor de cores nativo ou campo HEX, além de uma posição de 0 a 100 por cento. Para gradientes lineares você pode definir qualquer ângulo de 0 a 360 graus ou usar os botões rápidos de direção; gradientes radiais suportam formas de círculo ou elipse, e gradientes cônicos giram as cores em torno de um ponto central. Uma grande pré-visualização ao vivo se atualiza instantaneamente para que você veja exatamente o que cria. Comece com uma das predefinições selecionadas, toque no botão aleatório para novas ideias e copie a propriedade background gerada para a sua folha de estilos. Tudo funciona localmente no seu navegador, então é rápido, privado e funciona offline.
Como usar
- 1 Escolha um tipo de gradiente — linear, radial ou cônico.
- 2 Adicione pontos de cor e defina a cor de cada ponto (seletor ou HEX) e sua posição de 0 a 100%.
- 3 Ajuste o ângulo para gradientes lineares e cônicos, ou a forma para os radiais — ou carregue uma predefinição.
- 4 Acompanhe a pré-visualização ao vivo e clique em Copiar CSS para colar a propriedade background no seu projeto.
Como funciona
A ferramenta compõe uma função de gradiente CSS padrão a partir das suas configurações. Gradientes lineares usam linear-gradient(ângulo, pontos), onde o ângulo aponta a linha do gradiente e cada ponto de cor é escrito como uma cor seguida de uma posição em porcentagem. Gradientes radiais usam radial-gradient(forma at center, pontos) para espalhar as cores do centro para fora, e gradientes cônicos usam conic-gradient(from ângulo at center, pontos) para girar as cores em torno de um ponto. Os pontos de cor são ordenados automaticamente por posição antes da saída, então a ordem em que você os adiciona não importa. As posições são limitadas a 0-100% e pelo menos dois pontos são sempre mantidos, então o CSS gerado é sempre válido. O resultado é uma declaração background simples que você pode usar em qualquer navegador moderno sem prefixos.
Perguntas frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos?
Um gradiente linear mistura cores ao longo de uma linha reta cuja direção você define com um ângulo. Um gradiente radial espalha cores a partir de um ponto central para fora, em círculo ou elipse. Um gradiente cônico gira as cores em torno de um ponto central, útil para gráficos de pizza, rodas de cores e efeitos angulares. Os três são CSS nativo e suportados por todos os navegadores modernos.
Quantos pontos de cor posso adicionar?
Você pode adicionar quantos pontos de cor precisar; a ferramenta sempre mantém um mínimo de dois para que o gradiente continue válido. Cada ponto tem sua própria cor e uma posição de 0 a 100 por cento. Adicionar mais pontos permite criar arco-íris, fundos multicoloridos e transições suaves de várias cores.
O que o controle de ângulo faz?
Para um gradiente linear, o ângulo define a direção da linha de cor: 0 graus aponta para cima, 90 para a direita, 180 para baixo e 270 para a esquerda, para que você direcione a mistura para qualquer lado. Para um gradiente cônico, o ângulo define a rotação inicial da varredura. Você pode arrastar o controle deslizante, digitar um valor exato ou usar os botões rápidos de direção.
O CSS gerado está pronto para uso em produção?
Sim. A saída é uma propriedade background padrão usando funções de gradiente nativas que funcionam em todos os navegadores atuais sem prefixos de fornecedor. Basta copiar a linha e colá-la na sua folha de estilos, estilo inline ou componente. Você pode mudar o nome da propriedade para background-image se preferir manter uma cor de fundo separada.
Meus dados são enviados a algum lugar?
Não. Todo o gerador roda no seu navegador usando JavaScript e CSS. Nada sobre suas cores ou gradientes é enviado ou armazenado em um servidor, então a ferramenta é privada e continua funcionando mesmo se você se desconectar da internet.
Ferramentas e usos relacionados
Combine o gerador de gradientes com o conversor de cores para escolher valores exatos de HEX, RGB e HSL, e com o verificador de contraste para garantir que o texto continue legível sobre o seu gradiente. Designers e desenvolvedores o usam para criar fundos principais, botões, cartões, selos e efeitos decorativos para sites e aplicativos.