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.
Posted by Arne Hartherz to makandra dev (2011-10-04 18:21)