Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

background: radial-gradient(closest-side circle at center, #333, blue);

А вот то, к чему приводит применение каждого из них.

• closest-side — фигура распространяется до ближайшей к центру стороны блока (в случае задания круглой формы) или соответствует расстояниям до ближайших к центру горизонтальной и вертикальной сторон (в случае задания эллиптической формы).

• closest-corner — фигура распространяется от центра строго до ближайшего угла блока.

• farthest-side — в противоположность closest-side вместо распространения фигуры до ближайшей стороны она распространяется из центра до самой дальней стороны (или, в случае задания эллипса, до самых дальних горизонтальной и вертикальной сторон).

• farthest-corner — фигура распространяется из центра до самого дальнего угла блока.

• cover — результат идентичен применению farthest-corner.

• contain — результат идентичен применению closest-side.

Спецификацию W3C, относящуюся к радиальным градиентным фонам можно найти по адресу http://www.w3.org/TR/css3-images/.

Хитрый способ получения отличных линейных и радиальных градиентов CSS3

Если задание градиентов вручную представляется весьма трудоемкой работой, существует несколько интерактивных генераторов градиентов. Я предпочитаю пользоваться средством, которое можно найти по адресу http://www.colorzilla.com/gradient-editor/. В его графическом интерфейсе используется стиль графического редактора, позволяющий выбирать цвета, цветовые опорные точки, стиль градиента (поддерживаются как линейные, так и радиальные градиенты) и даже цветовое пространство (HEX, RGB(A), HSL(A)), в котором нужно задать получающийся в результате этого выбора градиент. Допускается также загружать в качестве отправных предопределенные градиенты. Если этого будет недостаточно, данное средство даже обеспечит вас дополнительным кодом для исправления недостатков Internet Explorer 9, чтобы показать градиент, и для создания альтернативного варианта со сплошным цветом для устаревших браузеров. Все еще сомневаетесь? А как насчет способности генерировать CSS-градиент на основе градиентных значений в существующем изображении? Возможно, именно этот аргумент станет для вас решающим.

Повторяющиеся градиенты