Радіальний градієнт - градієнт для створення ефектів при переході одного кольору в інший. На відміну від лінійного градієнта. тут використовується або кругової, або еліпсоподібну перехід. Напрями зміни кольору йде в різних напрямках від центру. Радіальний градієнт ще називають "круговим градієнтом".
Радіальний градієнт задається за допомогою властивості radial-gradient спільно з background. У нього є досить багато параметрів, які ми розглянемо послідовно.
Синтаксис CSS radial-gradient
- позиція - початкові координати Х і У (найчастіше задаються у відсотках). Є константи:
- top - по центру зверху (50% 0%)
- left top - верхній лівий кут (0% 0%)
- right top - верхній правий кут (100% 0%)
- center (стоїть за умовчанням) - центр області (50% 50%)
- left center - зліва по центру (0% 50%)
- right center - справа по центру (100% 50%)
- bottom - знизу по центру (50% 100%)
- left bottom - зліва знизу (0% 100%)
- right bottom - справа знизу (100% 100%)
- форма - завдання форми градієнта. Є два варіанта:
- circle - коло
- ellipse - еліпс
- розмір - як буде розтягуватися градієнт. Може приймати наступні значення
- closest-side - градієнт прагне до найближчої межі елемента.
- closest-corner - градієнт прагне до найближчого кутку.
- farthest-side (за замовчуванням) - градієнт поширюється до дальньої межі елемента.
- closest-corner - градієнт поширюється до дальнього кута елемента.
- цвет1 - початковий колір
- цвет2 - кінцевий колір
Можна задавати перехід кількох кольорів через кому.
У найпростішому варіанті можна задати тільки два кольори. наприклад
Для браузерів потрібно задавати це властивість з Вендорний префіксами. -moz -, - webkit-, -ms-, -o-:
Властивість radial-gradient також можна зробити повторюваним: repeating-radial-gradient
Приклади з радіальними градієнтами
Приклад 1. Різна позиція старту
Через ключове слово at можна задавати позицію центру радіального градієнта.
На сторінці перетворюється в наступне