Read more

How to use CSS3 gradients in Opera

Arne Hartherz
October 04, 2011Software engineer at makandra GmbH

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

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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:

Posted by Arne Hartherz to makandra dev (2011-10-04 20:21)