Радиальный градиент, как и линейный, создается в самом простом случае на основе 2-х цветов с помощью свойства background или background-image и значения radial-gradient():
| 1 2 3 | #simple { background-image: radial-gradient(#fff, #000); } |
В этом случае у вас будет черно-белый градиент из центра (первый цвет расположен в центре, второй - на краях блока)
Можно изменить направление градиента с помощью ключевого слова at и направления - top (вверху), bottom (внизу), center (в центре), left (слева) или right (справа).
| 1 2 3 | #simpleDest { background: radial-gradient(at top, #fff, #000); } |
Кстати, можно указывать направление с помощью 2-х ключевых слов, например, at top left (слева сверху) или at right center, а также показать позицию цветового маркера (в каких-либо единицах измерений - px, em, ex, cm, mm, pt или %):
| 1 2 3 | #circle{ background-image: radial-gradient(circle at right center, #fff, #22aaff 30%, #009 80%); } |
Здесь еще использовано ключевое слово circle, т.е. мы делаем круглый градиент. Можно также создавать радиальный градиент на основе эллипса (ключевое слово ellipse):
| 1 2 3 | #ellipse{ background: radial-gradient(ellipse at top center, #ff0 50%, #f00 60%); } |
Но эллипс является формой радиального градиента по умолчанию, поэтому, если вы не укажите ключевое слово эллипс, будет все также:
| 1 2 3 | #ellipse2{ background-image: radial-gradient(#ff0 50%, #f00 70%); } |
Еще можно задавать позицию центра градиента, как и положение его маркеров в %, px, em, pt и т.п.
| 1 2 3 | #destGradient { background: radial-gradient(at 30% 150px, #fff, #2a4 60%); } |
See the Pen Radial Gradient.
Вы можете задать форму и размер градиента , указывая его в самом начале в скобках. Если задана одна цифра - градиент будет круглым, если 2 цифры - эллиптическим, причем первая цифра обозначает ширину, а вторая - высоту эллипса:
| 1 2 3 4 5 6 7 8 9 10 11 12 | #gradient1 { background: radial-gradient(100px at 75% 30%, #fff 40%, #ff0 50%); } #gradient2 { background: radial-gradient(5em at right, #f98 87%, #f00 90%); } #gradient3 { background: radial-gradient(20em 100px at center 70%, #fff 40%, #f90 50%); } #gradient4 { background: radial-gradient(60% 2em at center, #3f5 75%, #6f9 80%)); } |
Смотрим на результат:
See the Pen Gradient Size .
Ключевые слова для радиального градиента
Для указания размера градиента можно использовать ключевые слова:
closest-side— края градиента подогнаны к ближайшей стороне контейнера. Раньше использовалось еще значение contain, которое является аналогом closest-side.farthest-side— края градиента подогнаны к дальней стороне контейнера.closest-corner—края градиента подогнаны к ближайшему углу контейнера, градиент может частично скрываться за границами контейнера.farthest-corner— края градиента подогнаны к дальнему углу контейнера, градиент может быть частично скрыт границами. Значение по умолчанию. Раньше использовалось еще значение cover, которое является аналогом farthest-corner.
Посмотреть Pen Radial Gradient Size.
Помните о совместимости со старыми версиями браузеров и необходимости указывать вендорные префиксы.
| 1 2 3 4 5 | background: #fcecfc; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #fcecfc 33%, #ff7cd8 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #fcecfc 33%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #fcecfc 33%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ |
Ниже можно посмотреть пример использование радиального градиента на сайте. Это очень упрощенный макет.
See the Pen Radial Gradient in Layout
Создание фигур в CSS с помощью градиента
Градиент может пригодится и в создании реалистичной сцены с 3D-объектом. Пример от автора Jon Kantner, найденный на codepen.io наглядно это демонстрирует.
See the Pen Ball in Window (1 Div, Gradients) by Elen (@ambassador) on CodePen.
Для элемента, у которого ширина равна высоте, как в примере с шариком, разница между типами градиента будет незаметна.
Между какими именно типами градиента? Линейный и радиальный будут отличаться в любом случае.
Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция.