Gerador de Gradientes CSS
Construa um gradiente linear, radial ou cónico e receba a linha de CSS, com o contraste entre as duas pontas.
Resultados
O que faz esta ferramenta
O CSS de um gradiente é curto e fácil de errar por pouco: o ângulo roda ao contrário do que se espera, as paragens são percentagens e a ordem importa. Defina as cores e onde ficam, e esta página escreve a linha por si. Diz-lhe também o contraste entre as duas pontas, porque um gradiente é normalmente um fundo e o texto tem de sobreviver à largura toda.
Fórmula
escreve a linha de CSS com as paragens de cor pela ordem e nas percentagens dadas
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
kind | Tipo de gradiente | — |
angle | Ângulo | ° |
color_1 | Primeira cor | — |
stop_1 | Onde a primeira acaba | % |
color_2 | Última cor | — |
stop_2 | Onde a última começa | % |
color_3 | Uma cor no meio, se quiser | — |
stop_3 | Onde a do meio fica | % |
OUT | O CSS | — |
VA | Só o valor | — |
ST | Paragens de cor | — |
CO | Contraste entre as duas pontas | :1 |
Exemplo resolvido
- Tipo de gradientelinear
- Ângulo135 °
- Primeira cor#c9502f
- Onde a primeira acaba0 %
- Última cor#17191f
- Onde a última começa100 %
- Uma cor no meio, se quiser
- Onde a do meio fica50 %
- O CSSbackground: linear-gradient(135deg, #c9502f 0%, #17191f 100%);
- Só o valorlinear-gradient(135deg, #c9502f 0%, #17191f 100%)
- Paragens de cor2
- Contraste entre as duas pontas3,91 :1
Perguntas frequentes
Para onde aponta o ângulo?
Zero graus aponta para cima, e o ângulo roda no sentido dos ponteiros do relógio a partir daí: 90 vai da esquerda para a direita, 180 vai de cima para baixo, 270 vai da direita para a esquerda. Isto apanha muita gente desprevenida porque não é como os ângulos funcionam na maior parte dos outros sítios, onde o zero aponta para a direita e a rotação vai ao contrário. O comité do CSS escolheu-o para que «180deg» se leia como «para baixo», o que se lê assim que se sabe.
Para que serve a linha do contraste?
Porque um gradiente é muitas vezes um fundo com texto por cima, e um texto que se lê numa ponta pode desaparecer na outra. O valor é o contraste entre as duas cores das pontas: quando é grande, nenhuma cor de texto funciona em toda a largura e é preciso um gradiente mais curto ou um painel por trás das palavras.