How to use CSS3 gradients in Opera

Since version 11.10 Opera provides support for linear gradients using -o-linear-gradient.

The syntax is pretty similar to Mozilla's -moz-linear-gradient. This will create a vertical gradient from yellow to red:

background-image: -o-linear-gradient(top, #ff0, #f00);

The first parameter defines where the gradient starts and which direction it will go. \
You can use top/left/bottom/right (and combinations of those) but also set any angle you like (0° being the left side, going counter-clock-wise):

background-image: -o-linear-gradient(70deg, #ff0, #f00);

Multiple colors in one gradient work by simply adding more:

background: -o-linear-gradient(left, #f00, #0f0, #00f, #ff0);

You can of course use any other CSS method to describe colors:

background-image: -o-linear-gradient(top, rgba(255, 255, 0, 0.5), hsl(23, 100%, 50%));

By the way:

• Opera 12 will support radial gradients Show archive.org snapshot .
• Our collection of Sass mixins has been updated accordingly.