CSS: cor de fundo em degradê

Esse recurso funciona nas versões atuais do Firefox, do Chrome e também no Internet Explorer 11.

Se você nunca aplicou regras CSS, sugiro que leia primeiro Folha de estilos em cascata e Como começar a estudar HTML e CSS.

Para mudar o fundo de toda a página, basta definir linear-gradient como valor da propriedade background:

body {background: linear-gradient(pink,deeppink);}

O resultado será:

 

Se você não estiver vendo acima um retângulo com fundo rosa em degradê, seu navegador não é compatível com o recurso.

Também é possível definir mais de duas cores:

body {background: linear-gradient(pink, deeppink, purple, darkred, red, orange, gold);}

 

No fundo de uma página, se você quiser que o background fique fixo, basta usar fixed:

body {background: linear-gradient(#669900,#ccff00) fixed;}

Abaixo, um exemplo de background gradiente fixo:

Fixo

Agora, um background que rola junto com a página:

Rolando

Para o degradê acontecer da esquerda para a direita, adicione to right:

body {background: linear-gradient(to right,skyblue,dodgerblue);}

 

Para o degradê seguir na diagonal, do canto superior esquerdo para o canto inferior direito, adicione to bottom right:

body {background: linear-gradient(to bottom right,tan,rosybrown,peru);}

 

Do canto inferior esquerdo para o canto superior direito, to top right:

body {background: linear-gradient(to top right,silver,#cccc00,#ffcc00);}

 

Do canto inferior direito para o canto superior esquerdo, to top left:

body {background: linear-gradient(to top left,gold,orange,chocolate);}

 

Do canto superior direito para o canto inferior esquerdo, to bottom left:

body {background: linear-gradient(to bottom left,#ffcc00,#cccc00,#99cc00);}

 

Para que alguma cor apareça em navegador antigo, que não entende linear-gradient, sugiro definir uma cor de background antes:

body {background-color:silver; background:linear-gradient(silver,azure);}

Em todos os códigos de exemplo, usei o seletor body, mas você pode aplicar esse background a diversos outros elementos do seu código HTML como div, nav, h1, h2, img de fundo transparente, etc.

Além do degradê, o valor linear-gradiente tem diversas possibilidades, mas vou falar sobre elas separamente.

Até mais!

Aprendi no CSS Tricks.