CSS conic-gradient() — конічний градієнт по колу
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте позитивні значення для
автор: Bondangular-arg, щоб обертати градієнт у годинниковому напрямку, та негативні значення, щоб обертати градієнт проти годинникової стрілки. - Порада
-
Експериментуйте з різними кольорами та їх розташуванням, щоб створити унікальні та цікаві візуальні ефекти.
автор: Bond - Нотатка
-
З використанням
автор: Bondconic-gradient(), ви отримуєте можливість створювати видовищні та ефективні градієнтні елементи, які збагачують вигляд вашого веб-сайту та підкреслюють його дизайн.
Синтаксис
conic-gradient([ <angular-arg>, ]? <color-stop-list>)Функція conic-gradient може отримувати 2 значень:
-
<angular-arg> -
Кут у градусах, радіанах або повних обертах. Наприклад,
автор: Bond45deg,0.5turn,-90deg. -
<color-stop-list> -
Колір в будь-якому прийнятному форматі (назва кольору, RGB, HSL тощо) та позиція колірної зупинки у градієнті. Ви можете використовувати відсотки (
автор: Bond%) або числові значення. Наприклад,10%,0.25.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 69 | 83 | 12.1 | 56 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 69 | 69 | 83 | 12.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Два однакові елементи з різним градієнтом.
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Два однакові елементи з різним градієнтом.</p>
</div>
<div id="result">
<div class="square"></div>
<div class="square gradient"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 200px;
height: 200px;
background: conic-gradient(red, blue);
margin-right: 20px;
}
.square.gradient {
background: conic-gradient(green, yellow);
}Наведіть курсор на квадрат, щоб побачити зміну градієнта.
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на квадрат, щоб побачити зміну градієнта.</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
align-items: center;
}
.square {
width: 200px;
height: 200px;
background: conic-gradient(red, blue);
transition: background 0.5s ease;
}
.square:hover {
background: conic-gradient(blue, green);
}Чотири блоки з тим самим conic-gradient(). Перший показує, що функція заповнює квадрат; другий — той самий градієнт плюс border-radius: 50%; третій — кругову діаграму на різких межах із подвійними позиціями; четвертий — шахівку через repeating-conic-gradient() і background-size.
HTML
<div id="description">
<h2>conic-gradient(): від квадрата до діаграми</h2>
<p>Коло робить не сама функція, а border-radius. Різкі сектори — подвійні позиції зупинок.</p>
</div>
<div id="result">
<figure><div class="box plain"></div><figcaption>сам градієнт</figcaption></figure>
<figure><div class="box plain circle"></div><figcaption>+ border-radius: 50%</figcaption></figure>
<figure><div class="box chart circle"></div><figcaption>різкі сектори</figcaption></figure>
<figure><div class="box checker"></div><figcaption>repeating-conic-gradient</figcaption></figure>
</div>CSS
#result {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
figure {
margin: 0;
font: 13px/1.4 system-ui, sans-serif;
text-align: center;
}
figcaption {
margin-top: 8px;
color: #495057;
}
.box {
width: 130px;
height: 130px;
border: 1px solid #ced4da;
}
.circle {
border-radius: 50%;
}
.plain {
background-image: conic-gradient(#e03131, #f59f00, #2f9e44, #1971c2, #9c36b5, #e03131);
}
/* Подвійна позиція на зупинці = межа без переходу */
.chart {
background-image: conic-gradient(
#1864ab 0 40%,
#2f9e44 40% 65%,
#e8590c 65% 85%,
#ced4da 85% 100%
);
}
.checker {
background-image: repeating-conic-gradient(#dee2e6 0% 25%, #ffffff 25% 50%);
background-size: 26px 26px;
}Коментарі
Коментарів ще немає — будьте першим!