CSS Tools Gerador de gradiente CSS
Crie gradientes lineares, radiais e cônicos de forma visual e copie CSS limpo. Empilhe várias camadas, adicione paradas de cor com transparência e arraste direto na pré-visualização para mudar a direção.
Gradiente CSS de vermelho para amarelo
Cada gradiente pode ter várias camadas, e cada camada tem seu próprio tipo, ângulo e cores. O resultado é CSS puro, sem prefixos de navegador, pronto para colar no seu projeto. O link da página salva o seu gradiente, então você pode compartilhá-lo ou voltar a ele depois.
Como usar o gerador de gradiente
Escolha o tipo de gradiente
Selecione linear, radial ou cônico para cada camada. O linear mistura as cores ao longo de uma linha reta, o radial as espalha a partir de um ponto central e o cônico as gira em torno do centro.
Ajuste cores e camadas
Clique na barra de cores para adicionar uma parada, arraste-a para mudar a posição e escolha qualquer cor com transparência. Com o botão de adicionar camada, você coloca outro gradiente por cima.
Pré-visualize seu design
Teste o gradiente em seis formas: tela cheia, quadrado, retângulo horizontal e vertical, círculo e estrela. Você também pode mudar o fundo atrás da forma.
background: linear-gradient(90deg, #ff0000 0%, #ffff00 100%);