Gerador de gradientes CSS
Adicione dois ou mais pontos de cor para gerar instantaneamente o código CSS de linear-gradient ou radial-gradient com pré-visualização ao vivo. Ajuste o ângulo e as posições livremente e copie o código com um clique.
O que é um gradiente CSS
Um gradiente CSS é uma maneira de desenhar uma faixa ou uma mancha radial de duas ou mais cores que se fundem entre si valendo-se só de uma folha de estilos, sem imagem alguma. linear-gradient() desloca as cores em linha reta segundo o ângulo que você indicar; radial-gradient() estende-as a partir de um centro em círculos. Por escrever-se como texto fica leve, não se torna grosseiro ao ampliar-se, e mudar uma cor reduz-se a editar um valor.
Esta ferramenta permite-lhe ajustar o tipo, o ângulo e as paradas de cor na tela, ver o resultado à medida que trabalha e copiar o CSS pronto tal como está. Pode colocar até seis paradas, cada uma com a sua cor e a sua posição em por cento; menos de duas não formam gradiente algum e provocam um aviso. Repare que o CSS mede o ângulo a seu modo: 0deg vai de baixo para cima e 90deg da esquerda para a direita, de sorte que o zero aponta para outro lado que na matemática comum. O gradiente radial não tem noção de ângulo, portanto esse ajuste não o afeta.
Como construir um gradiente CSS
- Escolha o tipo Tome linear se quiser que as cores se desloquem em linha reta, radial se quiser que se estendam a partir de um centro.
- Fixe o ângulo Só rege para o tipo linear. 0deg vai de baixo para cima e 90deg da esquerda para a direita, crescendo no sentido horário. Mova o cursor e veja a direção assentar-se.
- Coloque as paradas de cor «Adicionar uma cor» leva-o até seis. Dê a cada parada uma cor e uma posição em por cento e controlará com precisão onde uma cor cede lugar à seguinte.
- Confira a pré-visualização A pré-visualização é redesenhada a cada mudança, de modo que pode julgar na hora se um limite ficou brusco demais ou se a direção é a que queria.
-
Copie o CSS
«Copiar CSS» leva-o à área de transferência, pronto para colar no
backgroundda sua folha de estilos.
Dicas para aproveitar melhor
- Você pode adicionar até 6 pontos de cor e ajustar livremente a cor e a posição (%) de cada um para criar gradientes complexos com várias cores.
- Em um gradiente linear, 0 grau aponta de baixo para cima e 90 graus da esquerda para a direita; use o controle deslizante para ajustar de forma intuitiva.
- Gradientes radiais não têm ângulo: as cores se irradiam para fora a partir do centro em formato circular.
- Clique em "Copiar CSS" para copiar o código gerado diretamente para a área de transferência e colá-lo na sua folha de estilos.
Onde os gradientes CSS ajudam
Dar relevo a um botão ou a um selo
Um gradiente linear que escurece ligeiramente de cima para baixo faz um controle parecer mais premível que uma cor chapada. Manter pequena a diferença entre as cores é o que o conserva natural.
Construir um fundo de cabeçalho
Estenda um gradiente de duas ou mais cores pela larga faixa superior de uma página e terá um fundo de efeito sem carregar uma só imagem, e sem torná-la lenta.
Um efeito de holofote
Um gradiente radial claro no centro e escuro nas bordas lê-se como luz que cai sobre a superfície.
Pôr texto sobre uma fotografia
Sobreponha um gradiente linear que vá de preto semitransparente a totalmente transparente e o texto continuará legível mesmo sobre as partes claras da imagem.
Quando o que você fixa são as cores
Ao escolher o que pôr em cada parada, use o conversor de códigos de cor; para pensar em combinações, a paleta de cores.
Termos sobre os gradientes CSS
- linear-gradient
- A função CSS que desenha um gradiente cujas cores se deslocam em linha reta segundo um ângulo dado. Convém a fundos em faixa e ao preenchimento de um botão.
- radial-gradient
- A função CSS que desenha um gradiente que se estende a partir de um centro em círculos ou elipses. Não tem noção de ângulo.
- Parada de cor
- Indicação que situa uma cor concreta num ponto concreto do gradiente. A posição é dada em por cento, com o início em 0 % e o fim em 100 %.
- Ângulo (deg)
- A direção em que viajam as cores de um gradiente linear. No CSS, 0deg vai de baixo para cima e 90deg da esquerda para a direita, crescendo no sentido horário: o zero aponta para outro lado que na matemática comum.
- Prefixo de fornecedor
- Um prefixo como
-webkit-, acrescentado na época em que cada navegador oferecia uma novidade à sua maneira antes da normalização. Os gradientes já estão normalizados, de modo que não faz falta prefixo algum. - A propriedade background
- A propriedade CSS que fixa o fundo de um elemento. Um gradiente conta como uma espécie de imagem de fundo, e por isso se escreve aqui.
Perguntas frequentes
Curiosidade — por que os gradientes CSS substituíram as imagens de gradiente
Antes do CSS3, os fundos com gradiente na web geralmente eram criados como imagens PNG ou JPEG feitas em um editor de imagens. Essa abordagem trazia problemas reais: requisições extras que deixavam o carregamento da página mais lento, resultados borrados ao esticar a imagem em layouts responsivos, e a necessidade de reexportar a imagem inteira só para ajustar uma cor.
Quando os navegadores implementaram a sintaxe de linear-gradient e radial-gradient no início dos anos 2010, esses problemas praticamente desapareceram. Como os gradientes são descritos inteiramente em texto, eles são leves, permanecem nítidos em qualquer tamanho e podem ser recoloridos editando apenas alguns valores na folha de estilos.
As primeiras implementações exigiam prefixos de fornecedor diferentes (-webkit-, -moz-, -o- etc.) e uma sintaxe ligeiramente diferente entre navegadores, obrigando os desenvolvedores a escrever várias versões prefixadas da mesma regra. Agora que a sintaxe foi padronizada pelo W3C, a versão sem prefixo funciona de forma consistente em todos os principais navegadores.