Gerador de Gradiente CSS
Este gerador de gradiente CSS permite criar gradientes lineares, radiais e cônicos de forma visual e copiar o código CSS pronto para uso em um clique. Arraste as paradas de cor, ajuste o ângulo e regule a opacidade enquanto a pré-visualização ao vivo é atualizada na hora, sem precisar escrever a sintaxe do gradiente à mão.
Foi feito para desenvolvedores front-end e designers que querem um fundo em gradiente rápido, uma mistura de várias cores ou um esmaecimento transparente sem memorizar as regras linear-gradient(), radial-gradient() e conic-gradient(). Comece por uma predefinição selecionada ou monte o seu do zero.
Como Usar o Gerador de Gradiente CSS
Escolha um tipo de gradiente
Escolha Linear para uma mistura em linha reta, Radial para uma mistura circular ou elíptica, ou Cônico para uma rotação em torno de um ponto central.
Adicione e edite as paradas de cor
Clique na barra de gradiente para adicionar uma parada, arraste um marcador para reposicioná-lo ou arraste-o para fora da barra para removê-lo. Edite a Cor, a Posição e a Opacidade de cada parada direto na barra ou no editor de paradas.
Ajuste a direção e a forma
No linear, defina o ângulo com o botão, com o campo ou com a grade de 8 direções. No radial, escolha círculo ou elipse e uma posição central na grade 3x3. No cônico, defina o ângulo inicial e o centro.
Copie o seu CSS
Quando a pré-visualização estiver do jeito certo, clique em Copiar CSS para pegar a regra background completa e colá-la direto na sua folha de estilos.
Recursos
Três Tipos de Gradiente
Crie gradientes lineares, radiais e cônicos, cada um com seus próprios controles de direção, forma e posição.
Paradas de Cor Visuais
Clique na barra de gradiente para adicionar paradas, arraste-as para reposicionar ou para fora para removê-las, com retorno instantâneo.
Botão de Ângulo e Grade de Direção
Defina o ângulo linear de 0° a 360° arrastando o botão, digitando um valor ou usando a grade rápida de 8 direções.
Forma e Posição Radial
Alterne entre círculo e elipse e posicione a origem com uma grade de nove posições 3x3 para um controle preciso.
Opacidade por Parada
Reduza a opacidade de qualquer parada e a saída muda automaticamente para RGBA, pronta para esmaecimentos transparentes.
Saída CSS com Destaque
Leia um CSS de gradiente limpo e colorido por sintaxe e copie a regra de background completa para a área de transferência em um clique.
Desfazer e Refazer
Avance e volte pelas suas alterações com os botões ou com os atalhos Ctrl+Z e Ctrl+Y.
Aleatório e Inverter
Gere um novo gradiente aleatório para inspiração ou inverta na hora a direção das paradas atuais.
46 Predefinições Selecionadas
Comece por uma galeria de 46 gradientes escolhidos a dedo e organizados por família de cor, depois ajuste a gosto.
Saída Padrão e Privada
Gera sintaxe de gradiente CSS comum que funciona em navegadores modernos, tudo criado localmente no seu navegador.
Perguntas Frequentes
Como criar um gradiente em CSS?
Escolha um tipo de gradiente, adicione paradas de cor clicando na barra de gradiente e ajuste o ângulo, a posição e a opacidade até a pré-visualização ao vivo ficar do jeito certo. Clique em Copiar CSS para copiar a regra background finalizada para a sua folha de estilos.
Qual a diferença entre gradiente linear, radial e cônico?
Os gradientes Lineares misturam cores ao longo de uma linha reta, num ângulo escolhido. Os gradientes Radiais misturam para fora de um ponto central, em círculo ou elipse. Os gradientes Cônicos giram as cores em rotação em torno de um ponto central, como um gráfico de pizza ou um círculo cromático.
Como fazer um gradiente CSS de 3 cores (ou de várias cores)?
Clique em qualquer ponto da barra de gradiente para adicionar outra parada; a nova parada se mistura com as cores ao seu redor. Repita para adicionar quantas paradas precisar e arraste cada uma para posicioná-la. Um gradiente precisa manter pelo menos duas paradas de cor.
Como fazer um gradiente transparente em CSS?
Reduza a Opacidade de qualquer parada no editor de paradas. As paradas abaixo de 100% de opacidade saem como valores de cor RGBA, e o padrão xadrez na pré-visualização mostra exatamente onde o gradiente fica transparente.
Como remover uma parada de cor?
Arraste o marcador de uma parada para fora da barra de gradiente para excluí-la, ou use o controle de exclusão no editor de paradas. O gradiente sempre mantém no mínimo duas paradas, então você não pode remover as duas últimas.
Posso copiar o código CSS do gradiente gerado?
Sim. O painel de CSS mostra uma regra background com destaque de sintaxe, e o botão Copiar CSS copia a declaração completa para a sua área de transferência, para você colar direto na sua folha de estilos.
Os gradientes gerados são compatíveis com todos os navegadores?
A saída usa a sintaxe de gradiente CSS padrão, suportada pelas versões atuais do Chrome, Firefox, Safari e Edge, sem precisar de prefixos de fornecedor.
Meus dados de gradiente são armazenados em algum lugar?
Não. Cada gradiente é gerado inteiramente no seu navegador. Nada é enviado a um servidor, e suas cores e criações não são armazenadas nem rastreadas.
Ainda não há comentários. Seja o primeiro a comentar!