CSS3 Radial Gradient

Kruhový ořechod (gradient)

IE6
IE7
IE8
IE9
Firefox
Chrome
Opera
Safari
MobileSafari
AndroidBrowser

Poznámka: Šířka boxů vyznačuje podíl prohlížeče na návštěvnosti českých webů podle Rankings.cz z června 2012.

Gradienty jsou prefixové peklo! Máme sice generátor s jehož pomocí lze dosáhnout podpory i v MSIE od verze 6. Nicméně — podívejte se na vygenerovaný kód a čtěte problémy, které vám generování přechodů pro IE8– mohou přinést. I v případě moderních prohlížečů platí, že v každé jejich verzi mají přechody trochu jinou syntaxi. Používejte s rozmyslem nebo raději nahraďte bitmapou.

Základní syntaxe podle W3C bez prefixových variant

background:
  radial-gradient(_umisteni_stredu_ _uhel_, _tvar_ _velikost_, _barva_a_stop_bod_, _barva_a_stop_bod_, …);

→ Specifikace na W3C.org
→ Za jakých podmínek můžu používat? - HTML5please.us
→ Dokumentace na MDN

Příklad

Boxík bude mít na pozadí kruhový přechod vedoucí od středu.

#radialgradient-example {
  background: #eee; /* Old browsers */
  background:    -moz-radial-gradient(center, ellipse cover,#eee 0%, #666 100%); /* FF3.6+ */
  background:        -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #eee), color-stop(100%,#666)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #eee 0%,#666 100%); /* Chrome10+,Safari5.1+ */
  background:      -o-radial-gradient(center, ellipse cover, #eee 0%,#666 100%); /* Opera 12+ */
  background:         radial-gradient(center, ellipse cover, #eee 0%,#666 100%); /* W3C */
}

Tipy a triky

Gradienty jsou typu „image“, můžeme je tedy užít i například v list-style-type.