Criar gradientes CSS para a web
O que este gerador faz
Um gradiente CSS mistura duas ou mais cores ao longo de uma forma, e este gerador transforma essa mistura em CSS pronto para colar, sem que você precise escrever a sintaxe à mão. Você escolhe o tipo de gradiente, adiciona paradas de cor e a ferramenta monta a regra background correspondente — uma função linear-gradient() ou radial-gradient() — enquanto uma prévia ao vivo reflete cada mudança no instante em que ela acontece.
Cada parada de cor tem a sua própria cor, a sua posição no percurso em porcentagem e a sua opacidade, então você define com exatidão onde um tom dá lugar ao seguinte. As predefinições entregam uma paleta pronta para ajustar em vez de uma tela em branco.
Quando usar
Recorra a ele sempre que um preenchimento chapado ficar sem graça: planos de fundo em destaque, botões, cartões, selos e camadas de tonalidade ficam melhores com uma transição de cor sutil. Designers usam para prototipar um visual em segundos; quem programa usa para obter a sintaxe correta sem decorar palavras-chave de ângulo nem regras de porcentagem.
Ele também é ótimo para reconstruir um gradiente já existente: recrie-o parada por parada, ajuste o ângulo e cole o resultado direto em uma folha de estilo ou em um styled-component.
Exemplo: um gradiente linear
Digamos que você queira um esmaecimento diagonal de azul para roxo. Defina o tipo como linear, coloque uma primeira parada em 0% e uma segunda em 100% e ajuste o ângulo para 135deg. A saída fica assim: background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Mude para radial e essas mesmas duas paradas aparecem como radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%), espalhando-se do centro para fora em vez de percorrer uma linha.
Tipos de gradiente, paradas e casos-limite
Gradientes lineares seguem uma linha reta cujo ângulo ou direção você define; os radiais se espalham a partir de um ponto central com uma forma (circle ou ellipse), um tamanho como farthest-corner e uma posição X/Y ajustável. Adicionar mais de duas paradas cria faixas multicoloridas, e colocar duas paradas na mesma posição produz um corte de cor nítido em vez de uma mistura suave. Uma opacidade abaixo de 100% deixa o gradiente repousar sobre uma foto ou outra camada. Quando o resultado estiver do jeito certo, copie o CSS ou baixe-o e leve para o seu projeto.