Melhor Grátis Gerador de Gradientes CSS
Construa gradientes de CSS lineares e radiais com uma visualização ao vivo - copie o código de fundo.
100% livre
Sem inscrição
Sem marca de água
✨
Go Pro para os melhores modelos de IA - imagem, vídeo e chat - mais uploads maiores, prioridade na fila e sem espera.
Atualização para Pro
Amor Best.Free? Compartilhe-o
Como funciona
- Escolha um tipo. Escolha linear ou radial, e definir o ângulo para um gradiente linear.
- Escolha cores e paragens. Estabeleça duas ou mais cores e suas posições; adicione uma terceira paragem em Opções Avançadas.
- Copie o CSS. Hit Copie CSS e cole o gradiente de fundo na sua folha de estilo.
Sobre esta ferramenta
Construa um gradiente CSS por olho em vez de editar valores cegos. Mude entre linear e radial, arraste o ângulo para um gradiente linear, e escolha cores e posições para pelo menos duas paradas enquanto uma barra de visualização de largura completa atualiza ao vivo. Copie a propriedade de fundo resultante diretamente na sua folha de estilo. As opções Avançadas adicionam uma terceira paragem de cor para misturas mais ricas e permite escolher um círculo ou forma de elipse para gradientes radiais. Tudo funciona no seu navegador.
Para que as pessoas o usam
- Designar um gradiente de fundo de herói ou seção
- Crie um botão ou um gradiente de cartão preenchimento
- Misture duas ou três cores de marca suavemente
- Gerar um efeito de luz radial ou viñeta
Perguntas mais frequentes
Um gradiente linear mistura ao longo de uma linha recta no ângulo que você escolhe; um gradiente radial mistura para fora de um ponto central como um círculo ou elipse.
Para um gradiente linear, o ângulo define a direção da mistura: 0° vai de baixo a alto, 90° de esquerda a direita, e assim por diante.
Cada parada é uma cor colocada em uma porcentagem ao longo do gradiente. Mover uma parada muda onde essa cor se encontra e quão afiada é a mistura.
Sim. Abra Opções Avançadas para adicionar uma terceira parada de cor, inserida entre a primeira e a última para uma mistura multi-cor.
Não. As cores e paradas são transformadas em uma corda CSS localmente no seu navegador.
Completamente livre, sem conta e sem limites - uma ferramenta do lado do cliente com nada a medir.
Sim. Ele funciona no seu navegador, então CSS Gradiente Generator funciona em telefones e tablets, bem como desktop - não há nenhum aplicativo para instalar.
Normalmente, apenas alguns segundos para um arquivo típico - CSS Gradient Generator começa a trabalhar no momento em que você dá sua entrada.
O uso casual é ilimitado, sob um generoso bonito tampa de uso que o mantém rápido para todos.
Todos os navegadores modernos - Chrome, Safari, Firefox e Edge. CSS Gradiente Generator não precisa de nada instalado além do navegador que você já usa.