Seria algo parecido com a imagem abaixo; não tenho idéia de como fazer isso.
Não quero usar imagem, quero gerar com código.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeComo sugestão alternativa ao que foi perguntado, segue uma solução bem mais simples, que dispensa o uso de JS, com um CSS puro e relativamente simples:
body {
background-image: -ms-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
background-image: -moz-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
background-image: -o-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #FF3300), color-stop(1, #EEFF00));
background-image: -webkit-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
background-image: linear-gradient(to bottom, #FF3300 0%, #EEFF00 100%);
/* conforme sugerido pelo @PapaCharlie, seguem soluções pra IE mais velho:
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(
startColorStr='#FF3300', endColorStr='#EEFF00', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='#FF3300', endColorStr='#EEFF00', GradientType=0)";
}
Resultado:
Faça seus testes no JSFiddle, ou use esta ferramenta para gerar automaticamente o CSS para você.
Não vou repetir o código que já está na solução do @brasofilo (que já recebeu meu voto também), pois eu basicamente estou complementando a idéia que ele apresentou, com uma maneira de se usar a solução de degradê apresentada da resposta como imagem de fundo. Para isto, este método pode ser usado:
Canvas.toDataURL("image/png")
Exemplo de aplicação em JQuery:
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });
Cuidado com certas soluções supostamente em "JavaScript" pela web. Ao pesquisar alternativas externas, notei que muitas delas simplesmente geram um CSS, e o que é pior, inferior ao postado na resposta.
O grande onetrickpony tem um exemplo usando o elemento HTML canvas
. Conforme a documentação, o elemento é suportado por Firefox 1.5+, IE 9+, Chrome e Opera 9. Para versões menores que IE 9, é necessário usar a biblioteca Explorer Canvas.
HTML
<canvas id="gradient"></canvas>
CSS
canvas#gradient {
display: block;
height: 100%;
width: 100%;
}
JS
var
canvas = document.getElementById('gradient'),
context = canvas.getContext('2d'),
gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#ffffaa');
gradient.addColorStop(1, '#770000');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
background: linear-gradient(cor1, cor2)
do css?