css.in.ua
Підтримати

CSS function conic-gradient()

Опис

conic-gradient() - це CSS-функція, яка використовується для створення конічних градієнтів у вигляді колових переходів між кольорами на веб-сайтах. Ця функція дозволяє вам створювати ефектні та привабливі вигляди для ваших веб-елементів, таких як діаграми, показники або візуалізації даних.

Коли ви застосовуєте функцію conic-gradient(), ви визначаєте кілька кольорових зупинок - це точки, де кольори змінюються. Кожна зупинка вказує на позицію на коловій формі, де відбувається перехід від одного кольору до іншого. Зупинки можуть бути вказані за допомогою ключових слів, шістнадцяткових значень або RGB значень кольорів. Наприклад, функція conic-gradient(red, blue) створить конічний градієнт, який плавно переходить від червоного до синього.

Поєднуючи кольорові зупинки, ви можете створювати захоплюючі градієнтні ефекти з круговим переходом кольорів. Ви маєте повний контроль над точками зупинок, можливістю задати кут початку і закінчення градієнта, а також використовувати додаткові параметри, такі як прозорість і режим змішування.

Приклад використання:

Допустимо, ви хочете стилізувати елемент div на своєму веб-сайті за допомогою конічного градієнта, щоб надати йому цікавий вигляд. Ви можете використати такий CSS-код:

.example {
  width: 200px;
  height: 200px;
  background: conic-gradient(green, yellow, orange, red);
}

У цьому прикладі відтінки зеленого починаються з верхньої точки елемента та плавно переходять до червоного, описуючи коловий перехід на фоні div. Результат буде виглядати як захоплюючий градієнт, що привертає увагу до цього елементу на сторінці.

Порада:

Використовуйте позитивні значення для angular-arg, щоб обертати градієнт у годинниковому напрямку, та негативні значення, щоб обертати градієнт проти годинникової стрілки.
Порада:

Експериментуйте з різними кольорами та їх розташуванням, щоб створити унікальні та цікаві візуальні ефекти.
Нотатка:

З використанням conic-gradient(), ви отримуєте можливість створювати видовищні та ефективні градієнтні елементи, які збагачують вигляд вашого веб-сайту та підкреслюють його дизайн.

Синтаксис

conic-gradient([ <angular-arg>, ]? <color-stop-list>)
<angular-arg>

Кут у градусах, радіанах або повних обертах. Наприклад, 45deg, 0.5turn, -90deg.

<color-stop-list>

Колір в будь-якому прийнятному форматі (назва кольору, RGB, HSL тощо) та позиція колірної зупинки у градієнті. Ви можете використовувати відсотки (%) або числові значення. Наприклад, 10%, 0.25.

Переглядачі

Переглядач

69

83

12.1

56

79
Переглядач

69

69

83

12.2

Мобільних переглядачів ще не додано.

Приклади


Наведіть курсор на квадрат, щоб побачити зміну градієнта.

Два однакові елементи з різним градієнтом.

Документи

Зв'язок