Today is an exciting day because Opera 11.10 beta was released. This beta update adds support for CSS3 linear gradients! Today I'll introduce linear gradients and conclude with a quick tutorial showing how to build a glossy button with only CSS3 and HTML. How to Use CSS3 Gradients
Probably the most common way you will use CSS gradients is in for background of an element. In this situation, it is used in place of the CSS background-image property. You can target background-image specifically or in shorthand. Shorthand: element {
background:gradient;
}
Expanded: element {
background-image:gradient;
}
We'll look at how to create the gradient soon. First, you may be wondering which browsers support gradients. Web Browser Support for CSS Gradients
Currently every browser (if you include Opera's 11.1 beta) supports CSS gradients. Notice that I did not say every browser supports CSS3 gradients. Of course, Internet Explorer is the exception. It has its own special non-CSS3 gradient filter that works in IE6+. You can read further on that topic at the Microsoft Social Development Network and here. How to Create CSS3 Gradients
Every browser that supports linear gradients requires a vendor-prefix. Here's how we would declare a CSS3 gradient to target all browsers that support it: element {
background-color: #aaa;
background-image: -moz-linear-gradient(...); /* Firefox */
background-image: -webkit-linear-gradient(...); /* new webkit browsers */
background-image: -webkit-gradient(linear, ...); /* older webkit browsers */
background-image: -o-linear-gradient(...); /* Opera */
}
This is extremely verbose, and we haven't even declared an IE gradient in this block of CSS! Fortunately, three of the declarations (moz, new webkit and opera) use the same syntax, which is defined in the W3C spec drafts. Older webkit—just older than a couple months—uses a completely different syntax. It is easy to pick up the basic syntax, though.
Before we look at the syntax, you may have noticed that we declared the background color first. That is important for older browsers that don't support these gradients. Just try to make the background color similar to the average color of the gradient so it degrades gracefully. CSS3 Gradient Syntax
First we'll examine the standard linear gradient syntax, then we'll look at webkit. Syntax: -prefix-linear-gradient( [ {point} || {angle} ,]? {stop}, {stop} [, {stop}]* )
First we've got to define the vendor prefix—moz: Firefox, webkit: new Webkit browsers, or o: Opera. You'll probably want to declare them all like I did in the first example. The first filter parameter we must declare is "{point}" and/or the "{angle}" (in degrees). This value represents the starting point/angle of the gradient. You can declare this value in a few ways:
- As a value of a side (i.e. top, right, bottom or left)
- A corner, which is two sides combined (i.e. left top, left bottom, right top, right bottom)
- A degree value (e.g. 35deg, 172deg, 81deg, etc.)
- A side combined with a degree value (e.g. top 35deg, right 10deg, etc.)
Next we define at least two s. Stops are colored points in the gradient. As with any other color value in CSS, you can define it as a color name, hexadecimal, RGB or others. By default, each stop will be evenly spaced evenly, but we can override that by specifying a percentage value after the color value.
Gradient Examples
Here are some examples of gradients.
background:-o-linear-gradient(top, blue, white);
...produces this:
This:
background:-o-linear-gradient(left, blue, white);
...produces this: 
Here's an example of using the {angle} for gradients instead of the {point}.
Using Color Stops
Here is a gradient that was created with color stops: 
This is the CSS that would create such a gradient: background: -o-linear-gradient(top, blue, white 80%, orange);
Now let's look at Webkit implementations.
Older Webkit Gradients
In Webkit, the gradient filter name is simple "-webkit-gradient". The first parameter of the filter is the type of gradient. In this case, we want "linear".
background:-webkit-gradient(linear, ...);
Next we declare the starting point [comma] ending point. Then we declare from(color) [comma] to(color). Translating the first gradient we did to webkit: background: -webkit-gradient(linear, 0 0, 0 100%, from(blue), to(white));
Webkit requires two values for the starting point. You can't just do "top". You have to do "left top" or "right top" or "center top". You can also represent these values as percentages, as in the last example.
Build a Button with CSS3 Gradients and Box & Text Shadows
It is easy to build a good-looking button with CSS3. In this example we'll wrap our button text in a and give it a class of "button". Place this HTML in the tag of your .html file.<div class="button">Button</div>
<a href="http://www.cyberstream.us"><div class="button">CyberStream</div></a>
<a href="http://www.opera.com/browser/latest"><div class="button">Download Opera 11.1 Beta!</div></a>
Next, let's apply CSS styles to it. If you are new to CSS, you can read here how to include styles in your HTML webpage. I'll create an internal stylesheet this time.
.button {
background:#aaa; /*define a background color to fallback onto */
/* our gradients */
background-image:-o-linear-gradient(bottom, #888, #eee);
background-image:-moz-linear-gradient(bottom, #888, #eee);
background-image:-webkit-linear-gradient(bottom, #888, #eee); /* current webkit gradient syntax */
background-image:-webkit-gradient(linear, left bottom, left top, from(#888), to(#eee)); /* former webkit gradient syntax */
padding:6px 10px;
color:#111;
display:inline-block;
font:bold 32px calibri, "Lucida Granda", arial, sans-serif;
border-radius:10px; /* round corners */
border:1px solid #888;
/* ...Our box shadows; the first one gives the soft white inset glow. The second gives the drop shadow, and the third gives the glossy effect. */
-moz-box-shadow:inset 0 0 5px #fff, 1px 1px 9px #999, inset 0 -38px 0 rgba(50, 50, 50, .2); /* FF */
-webkit-box-shadow:inset 0 0 5px #fff, 1px 1px 9px #999, inset 0 -38px 0 rgba(50, 50, 50, .2); /* Chrome, Safari */
box-shadow:inset 0 0 5px #fff, 1px 1px 9px #999, inset 0 -38px 0 rgba(50, 50, 50, .2); /* Opera and IE9 */
text-shadow:0 1px 1px #eee;
margin:10px;
}
Let's also add styles for the :hover and :active (click) states to make the button more "interactive".
.button:hover {
/* light up the button slightly when it is hovered over */
background:-o-linear-gradient(bottom, #888, #fff);
background: -moz-linear-gradient(bottom, #888, #fff);
background: -webkit-linear-gradient(bottom, #888, #fff);
color:#333;
text-shadow:0 1px 1px #eee;
}
.button:active {
/* lighten the text when the user clicks the button */
color:#666;
}
Unfortunately, if you view this in IE8 and below right now the button will spread across the page. We can fix this in a conditional comment:
You can view or download the product here. Here's what the button will look like in various web browsers: 
I intentionally did not use Internet Explorer's special gradient because it does not work correctly with the border-radius in IE9. We could have disabled the border-radius in IE9 with a conditional comment, but I just decided to leave out the special gradient filter instead. Conclusion
I hope you've found this post useful and interesting. If you have any questions, don't hesitate to leave me a comment below and I'd be glad to help. Thanks for reading!
0
ive tried many times over and i still receive no results. is my coding wrong? my brower is chrome this is my code....
<style type= "text/css" media="screen">
#container
{
width: 800px;
height: 1000px;
margin: auto;
background: red;
background: gradient (linear, 0 0, 0 100%, from(red), to (blue));
}
</style>
0
Thanks this nice guide...
You should send your nice articles to dev.opera.com.
They give pay for this.
"Do you pay for articles?
YES! We pay a rate of US$350 for a 2000 word article, so ideally you should try to stick to around that word count. Multiple part articles will be considered."
1
Thanks for your comments. Kane, try this:
background: -webkit-gradient (linear, 0 0, 0 100%, from(red), to (blue));
Thank you for the suggestion, metude! I had never thought of that. Actually, dev.opera.com posted an article on linear gradients a couple days after I posted this on my blog, but I'll keep that in mind for the future. There are excellent articles there. They've helped me out many times.