CSS Gradient Generator
Create CSS gradients
Create CSS gradients Executa localmente no seu navegador
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
O CSS Gradient Generator cria um gradiente linear ou radial real a partir de duas cores e um ângulo, mostra-o em tamanho real e entrega o CSS. O ângulo é a parte que as pessoas interpretam mal: em CSS, 0 graus aponta para cima e a direção gira no sentido horário, então 90 graus vai da esquerda para a direita e 180 graus vai de cima para baixo. Entender errado é o motivo pelo qual um gradiente geralmente parece de cabeça para baixo na primeira vez. Ambas as cores podem carregar um valor alfa de oito dígitos, que é como você esmaece um gradiente sobre uma imagem principal.
Where people use the
- Construindo um plano de fundo heróico que se desvanece entre duas cores de marca.
- Testar qual ângulo parece correto antes de comprometê-lo no código.
- Produzindo um gradiente vertical sutil para um cartão ou botão.
- Criando uma sobreposição semitransparente que escurece uma fotografia.
How to use the
- 1
Escolha as cores inicial e final
Use o seletor de cores ou digite um valor hexadecimal. A visualização e o CSS são atualizados conforme você os altera.
- 2
Escolha linear ou radial
Linear atravessa a caixa em um ângulo escolhido. Radial se espalha para fora do centro como um círculo.
- 3
Defina o ângulo
Arraste o controle deslizante de 0 a 360 graus. Lembre-se de 0 graus para cima, 90 graus para a direita, 180 graus para baixo e 270 graus para a esquerda.
- 4
Copie o CSS
A regra é uma declaração de fundo que você pode colar diretamente em uma folha de estilo ou em uma propriedade de imagem de fundo, se preferir.
Dicas e práticas recomendadas
- Prefira uma pequena diferença de luminância para fundos que contenham texto; parece textura em vez de distração.
- Para texto sobre gradiente, verifique o contraste nos pontos mais claros e mais escuros, não apenas na média.
- Mantenha os gradientes em dois ou três pontos; mais tende a parecer turvo.
Perguntas frequentes
Para que lado o ângulo aponta?
Zero graus aponta para o topo do elemento e o ângulo aumenta no sentido horário. Então 90 graus vai para a direita e 180 graus vai para baixo. Isso é contra-intuitivo se você estiver acostumado com ângulos matemáticos medidos no sentido anti-horário a partir da direita.
Por que meu gradiente parece com faixas?
Porque duas cores com luminância próxima produzem etapas visíveis em uma tela de 8 bits, especialmente em uma área grande. Adicionar um terceiro stop sutil ou usar uma faixa de luminância um pouco mais ampla geralmente o oculta.
Posso usar transparência?
Sim. Use um valor hexadecimal de oito dígitos, como 667eea00 para totalmente transparente ou 667eea80 para metade, e o gradiente desaparecerá sobre o que estiver atrás dele.
O gradiente é suportado em todos os lugares?
Gradientes lineares e radiais são suportados em todos os navegadores atuais sem prefixo. Os prefixos dos fornecedores são necessários apenas para versões muito antigas do Safari e do Android, o que na prática significa que nada foi construído depois de 2015.
Por que meu gradiente não aparece?
Porque o elemento não tem altura. Um gradiente é pintado na caixa do elemento, então um div vazio cai para altura zero e não mostra nada. Defina uma altura ou adicione conteúdo.
Gera mais de duas paradas de cor?
Não, esta ferramenta lida com dois. Para um gradiente multipontos, pegue o CSS que ele produz e adicione pontos manualmente; a sintaxe é simplesmente mais pares de cores e porcentagens separados por vírgulas.