De aztán helyreállt a világ rendje, kiderült, hogy működik az, csak már nem azt a szintaxist kell használni, mint az alpha verzióban. Az új szintaxis a következő:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
-moz-radial-gradient( [<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* );

A lineáris gradiens változóinak magyarázata a következő. A point jelenti a gradiens kezdőpontját. Ugyanazok az értékek elfogadhatóak, mint a background-position esetében. Ha csak egy értéket adunk meg (pl. left), akkor a másik tengely menti értéket center-nek tekinti. Az angle jelenti a gradiens irányszögét. Megadható fokban, gradban vagy radiánban. A stop pedig egy színt jelölt, amelyhez opcionálisan egy helyet is megadhatunk a gradiensen belül, ahol a gradiensnek azt a színt fel kell vennie. Lássunk egy példát is (balra a gradiens, jobbra ugyanaz képként, arra az esetre, ha valaki nem Firefox 3.6-tal nézi):

background: -moz-linear-gradient(top, #000, #FFF);

A körgradiens esetében további változók szorulnak magyarázatra. A point alapértelmezett értéke az objektum középpontja. A shape változó a circle vagy az ellipse értéket veheti fel, ebből az utóbbi az alapértelmezett. A circle választásával kapunk tehát valódi körgradienst, egyébként elipszis alakú lesz. A size változó segítségével beállíthatjuk azt, hogy a gradiens hol érjen véget (meddig terjedjen). A lehetséges értékek a következők:

closest-side

A gradiens a doboz legközelebb eső oldaláig terjed. A closest-side szinonímája a contain.

closest-corner

A gradiens a doboz legközelebb eső sarkáig terjed.

farthest-side

A gradiens a doboz legtávolabb eső oldaláig terjed.

farthest-corner

A gradiens a doboz legtávolabb eső sarkáig terjed. A closest-side szinonímája a cover.

Íme erre is egy példa (balra a gradiens, jobbra a kép, mint fent):

background: -moz-radial-gradient(cover, white, black);

A Firefox a 3.6 verzióval tehát jelentősen ledolgozta a hátrányát a Webkit-es böngészőkkel szemben. Egyetlen kellemetlenség, hogy aki még az alpha verzióhoz optimalizálta a CSS-t, annak újra kell írnia (pl. nekem). Részletesebb információkat a témáról a Mozilla Developer oldalakon találtok (Using gradients, -moz-linear-gradient, -moz-radial-gradient), angol nyelven.

A CSS 3 lehetőséget ad gradiensek definiálásra, helyettesítve az eddig elterjedt photoshop-os megoldást. Messze még az az idő, amikor ezt minden böngésző támogatni fogja, de a CSS 3 gradiensei már most is jó megoldást jelentenek ott, ahol a gradiens csak plusz stilisztikai elem, nem pedig a design kulcsfontosságú része. Például ezen a blogon, a háttérben a fehértől a világosszürkéig terjedő gradiens fut végig. Ezt most még csak azok láthatják, akik WebKit-es böngészőt használnak, azaz Safari-t vagy Chrome-ot, illetve azok, akik letöltötték a Firefox 3.6-os verziójának alfáját. (A Firefox 3.6 gradiens kezelése az alfa verzió óta jelentősen változott, ezért az alábbi példák nem működnek. Az új szintaxisról bővebben ebben a posztban.)

Lineáris gradiens

A megvalósítás nem bonyolult, de jelenleg layout-motor függő. A WebKit esetében a következő példa illusztrálja a használt beállítás szintaxisát:

background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));

A Firefox, a 3.6-tól felfelé, a következő szintaxist várja:

background: -moz-linear-gradient(left top, left bottom, from(#ffffff), to(#dddddd));

Az egyetlen eltérés a két formátum között, hogy a gradiens típusa a WebKit esetében egy paraméter, míg a Firefox Gecko motorja esetében a függvény nevében szerepel. Meg kell adni a gradiens kezdőpontját és a végpontját, valamint a kezdőszínt és a célszínt. A köztes színeket a függvény kiszámolja. A kezdő és végpontokat lehet pixel szinten, százalékban vagy olyan módon megadni, ahogy én tettem a példában. Lehet még szín-stopot is közbeiktatni, mégpedig a color-stop (a, b) formulával. Itt a vagy egy százalékban megadott, vagy egy 0 és 1 közötti szám, és ez jelöli a szín-stop helyét, b pedig az a szín, amit a megadott ponton látni szeretnénk. Íme egy Firefox példa:

background-image: -moz-linear-gradient(left, right,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(64%, blue),
color-stop(80%, indigo),
to(violet));

Itt egy példa lineáris gradiensre, WebKit és Gecko támogatással.

Körgradiens

Persze nem csak lineáris gradienst készíthetünk. A WebKit esetében így adhatunk meg körgradienst, akár többet is:

background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188));

A Firefox szintaxisa körgradiens megadására a következő:

background: -moz-radial-gradient(45px 45px, 15px, 55px 55px, 40px, from(aqua), to(rgba(0, 0, 255, 0)), color-stop(0.95, blue));

Körgradiens példa. A WebKit-es böngészőt használók 2-t látnak, a Gecko-sok 1-t.

Hol használhatjuk?

A Gecko még elég korlátozottan támogatja a gradienseket: még az említett 3.6 alfa is csak a background paraméter részeként. A WebKit ennél sokkal szélesebb lehetőségeket nyújt. Mindenütt használható gradiens, ahol kép (img) használata megengedett. Példák:

• background-image
• border-image
• list-style-image
• content property