Gerador de Gradiente CSS
Projete um gradiente linear, radial ou cônico visualmente e copie o CSS com um clique.
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
Como usar Gerador de Gradiente CSS
- Escolha um tipo de gradiente e defina o ângulo para linear ou cônico.
- Adicione pontos de cor e arraste cada um para a posição desejada.
- Copie o CSS gerado direto para o seu stylesheet.
Sobre Gerador de Gradiente CSS
Crie um gradiente CSS visualmente e copie o código quando ele estiver do jeito que você quer. Escolha primeiro o tipo: linear, radial ou cônico. Para gradientes lineares e cônicos, você define o ângulo em qualquer valor entre 0 e 360 graus, que controla a direção pela qual as cores se movem ou giram; um gradiente radial é desenhado como um círculo que se espalha a partir do centro. Uma prévia ao vivo é atualizada conforme você trabalha, então você projeta em cima do resultado real, sem precisar adivinhar.
Adicione quantos pontos de cor quiser, com um mínimo de dois. Cada ponto tem um seletor de cor e um controle deslizante de posição de 0 a 100 por cento, e os pontos são ordenados automaticamente pela posição, então você pode inserir uma nova cor em qualquer lugar e ela se encaixa no lugar certo. É assim que você obtém misturas suaves de várias cores ou faixas nítidas, dependendo de quão próximas você define as posições.
O resultado é uma declaração background pronta para colar, em sintaxe CSS padrão de gradiente; copie-a direto para o seu stylesheet. Ele escreve uma única propriedade background e não adiciona prefixos de fornecedor, que os navegadores modernos já não precisam para gradientes. Para uma sombra por baixo do seu elemento, veja o gerador de box-shadow, e para ajustar um valor de cor, o conversor de hex para RGB é útil.
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 as espalha para fora a partir do centro, em círculo. Um gradiente cônico as gira ao redor de um ponto central como uma roda de cores, também controlada por um ângulo.
Quantas cores posso usar?
Quantas quiser, com um mínimo de duas. Cada cor é um ponto com seu próprio seletor e uma posição de 0 a 100 por cento. Adicionar mais pontos permite criar misturas de várias cores ou, ao posicioná-los próximos entre si, faixas nítidas de cor.
O que faz o controle deslizante de posição?
Ele define onde, ao longo do gradiente, cada cor fica, de 0 por cento no início a 100 por cento no final. Os pontos são ordenados automaticamente pela posição, então mover um além do outro os reordena corretamente. Posições próximas criam uma transição abrupta; posições espalhadas criam uma mistura suave.
Preciso de prefixos de fornecedor para o gradiente?
Não. A ferramenta gera CSS padrão, sem prefixos, porque os navegadores atuais suportam gradientes sem eles. Sintaxes antigas, como -webkit- ou -moz-, não são mais necessárias para os tipos de gradiente produzidos aqui.
O que exatamente o botão de copiar me dá?
Uma única declaração CSS de background usando sintaxe padrão de gradiente, pronta para colar no seu stylesheet. Ele define uma propriedade background; não gera uma regra completa nem uma classe, então cole em qualquer seletor que você esteja estilizando.