This is a simple gradient.
Not much to say about this one. It is just a white to blue transition.
This is an example of a more complicated gradient. Notice there is alpha transparency in the top half of the gradient. Sweet.
A (color) gradient is a transition from one color to another. There can be multiple color stops and varying shades of opacity along the way.
You can create gradients easily in Photoshop, Illustrator, and Flash.
For the web, I would always try to create the gradient in CSS first and use a Graphic Gradient only as a last resort. Why?
Use the Ultimate CSS Gradient Generator to write your CSS code.
This is a simple gradient.
Not much to say about this one. It is just a white to blue transition.
This is an example of a more complicated gradient. Notice there is alpha transparency in the top half of the gradient. Sweet.
If you want to use a gradient on a page background, it's not quite as simple as applying it to your html selector in CSS because the gradient will only extend to the bottom of your content or viewport, whichever is shorter, and then start repeating.
<body>)The solution is to force the HTML be be at least as large as the viewport with the min-height property as in:
html {
min-height:100%;
background: #290200;
background: -moz-linear-gradient(top, #77130b 0%, #290200 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77130b), color-stop(100%,#290200));
background: -webkit-linear-gradient(top, #77130b 0%,#290200 100%);
background: -o-linear-gradient(top, #77130b 0%,#290200 100%);
background: -ms-linear-gradient(top, #77130b 0%,#290200 100%);
background: linear-gradient(to bottom, #77130b 0%,#290200 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77130b', endColorstr='#290200',GradientType=0 );
}
If you content will always be longer than the viewport, then you could place the gradient on the #container or some other content container.
<html>)In this case, the gradient will not scroll with (tall) content. (Except on the iPad, where it will behave like the previous example.)
html {
font-family:Verdana, Geneva, sans-serif;
font-size:100%;
line-height:1.4;
height:100%; /* force the background to match height of window */
background-attachment:fixed;
/* White to Gold gradient */
background-image: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #ffcc33 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffcc33));
background-image: -webkit-linear-gradient(top, #ffffff 0%,#ffcc33 100%);
background-image: -o-linear-gradient(top, #ffffff 0%,#ffcc33 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#ffcc33 100%);
background-image: linear-gradient(to bottom, #ffffff 0%,#ffcc33 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffcc33',GradientType=0 );
}
Notice two things: The height has been set to 100% and the background-attachment is fixed. Furthermore, make sure you are using the explicit background-image property instead of the shortcut background property.