How to Create a CSS3 Gradient in Opera

How can you create a CSS3 gradient in Opera?

Use this one:

background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));

css3 gradient not work in opera

Problem is Opera 11.0 solution is Opera 11.1

http://caniuse.com/css-gradients

What is the equivalent of -webkit-gradient for Opera browser?

You need to use -o-linear-gradient for opera, for more info you can refer here.

But if you want, simply using linear-gradient is sufficient, if you are not planning to support vintage versions.

Opera mini css3 transform, gradient, transition polyfill?

About transition/transform in Opera Mini:

Opera Mini use OBML. The OBML server farm renders the requested web page then takes a snapshot of it before converting it into OBML and sending it to the browser. So page in Opera Mini can't be animated by css or javascript or gif.

About gradients in Opera Mini:

Opera Mini use servers based on Presto browser engine to render the page. Presto version 2.10 can render CSS3 gradients. Now Opera Mini 7.5 on Android (last version) use Presto 2.8 and Opera Mini 8 for Blackberry and Java-browsers use 2.9 version. So 2.10 is not so far (perhaps one year).

Also you can use css inline base64 images via:

some_selecor { 
  background-image: url(data:image/png;base64,base64_image_code_here);
}

in Opera Mini and you can set your gradient as encode background-image.

IMHO:

Opera Mini use server farm render to save battery level on your phone and to save your traffic (size of request in OBML is only 10% of HTTP requests size of the same page). So render all CSS3 features it not the main target of this browser.

How to create this gradient background in CSS3?

I can't really see that small image, but I advise you to try an online CSS3 generator, like this one:

CSS3 Gradient Generator

Proper border gradient syntax for Opera and Firefox, I have the webkit syntax working fine

For Mozilla, border gradients are supported in this way:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

Opera might support it as

border-image: linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;'

But I am not sure.

Opera 11.11, multiple backgrounds, gradients and modernizr issue

I think I can help a little (just ran into the same problem)...:

Opera as of now only supports linear-gradients (see here, note on radial-gradients; Mar2011). To get the linear part working in your example you need to add a dot for opacity 0 like so:

-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),

into this:

-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%),

You can add linear gradients as background images just like regular images, so I guess we will just have to wait for radial-gradient support.

Cheers

EDIT: Try this link showing how to make radial gradients in Opera via SVG.