CSS3 Linear gradients and Opera?

Question

Does Opera browser supports linear-gradient? What is syntax? Thanks

Opera 12.10 supports unprefixed CSS3 gradients. – c69 Nov 01 '12 at 20:29 — c69, Nov 01 '12 at 20:29

gor · Accepted Answer · 2011-02-13T15:00:15.493

No, Oper does not support linear gradient of CSS3. But, you can use svg for backgrounds. Here is content of simple svg file with gradient:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" style="stop-color: #9c0000;"/>
            <stop offset="100%" style="stop-color: #590000;"/>
        </linearGradient>
    </defs>

    <rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>

score 1 · Answer 2 · answered Feb 14 '11 at 09:12

1

No, but it has been announced that it will very soon. My guess would be March.

answered Feb 14 '11 at 09:12

Lea Verou

23,618
9
46
48

score 1 · Answer 3 · edited May 23 '17 at 11:43

1

AS of Aug 2011 YES, Opera does support linear gradients.

At Gradients in Internet Explorer 9 you can see the how using it.

Briefly:

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

Hope it helps you.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 23 '11 at 07:57

Diosney

10,520
15
66
111

score 0 · Answer 4 · answered Feb 15 '11 at 00:09

No but here's the best solution.

Go to photoshop, make a big ass gradient in whatever direction lets say 2560px x 20px

Use "save for website" as a jpg, using and any % of quality but save it as 2560px x 1px instead.

Use it as a background image with repeat-x or repeat-y whatever repeat is required to extend the 1px width/height....And it will barely cost you a KiloByte or two.

CSS3 Linear gradients and Opera?

4 Answers4