CSS radial-gradient() — круговий градієнт

Опис

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

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

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

Наприклад:

• radial-gradient(circle, closest-side, red, blue): радіальний градієнт у формі кола, з розміром, що найближчий до сторони контейнера, починаючи з червоного кольору і закінчуючи синім кольором.
• radial-gradient(ellipse 50% 50%, closest-corner, red 20%, blue 80%): радіальний градієнт у формі еліпса, з центром в 50% по ширині і 50% по висоті, розтягнутим до найближчого кута, починаючи з червоного кольору на 20% градієнта і закінчуючи синім кольором на 80% градієнта.

правити

Загальний опис

правити

Порада

Експериментуйте з різними комбінаціями параметрів, такими як форма, розмір і положення, щоб створити бажаний ефект градієнта.

автор: Bond правити

Порада

Використовуйте кольорові зупинки (color-stops), щоб визначити плавний перехід між кольорами в градієнті.

автор: Bond правити

Порада

Варто використовувати префікси властивостей -webkit-, -moz-, -o- та -ms- для кращої сумісності з різними браузерами.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

radial-gradient([shape] [size] [position]?, [color-stop1], [color-stop2], ...);

Функція radial-gradient може отримувати 4 значень:

<shape>

Визначає форму градієнта. Можливі значення: circle (коло), ellipse (еліпс), closest-side, closest-corner, farthest-side, farthest-corner.

автор: Bond

правити

<size>

Визначає розмір градієнта. Можливі значення: closest-side, closest-corner, farthest-side, farthest-corner, <length>, <percentage>.

автор: Bond

правити

<position>

Визначає положення градієнта. Можливі значення: <position-keyword>, <position-x> <position-y>.

автор: Bond

правити

<color-stop>

Визначає колір і позицію градієнта. Можливі значення: <color> (кольори), <percentage> (позиція градієнта у відсотках), <length> (позиція градієнта у пікселях).

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	7	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	26	16	7

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1</h2>
  <p>Цей приклад ілюструє зміну градієнта при взаємодії з елементом.</p>
</div>

<div id="result">
  <div class="container">
    <div class="element"></div>
  </div>
</div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.element {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(ellipse at top, #e66465, transparent),            radial-gradient(ellipse at bottom, #4d9f0c, transparent);
  transition: background 0.3s ease;
}

.element:hover {
  background: radial-gradient(ellipse at bottom, #e66465, transparent),            radial-gradient(ellipse at top, #4d9f0c, transparent);
}

<div id="description">
  <h2>Приклад 2</h2>
  <p>Цей приклад демонструє два однакових елементи з різними градієнтами.</p>
</div>

<div id="result">
  <div class="container">
    <div class="element example"></div>
    <div class="element changed"></div>
  </div>
</div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.element {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.example {
  background: radial-gradient(circle at center, red 0, blue, green 100%);
}

.changed {
  background: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

<div class="row">
    <div class="tile a"></div>
    <div class="tile b"></div>
    <div class="tile c"></div>
    <div class="tile d"></div>
</div>

<div class="row labels">
    <span>типово: еліпс</span>
    <span>circle</span>
    <span>circle at 25% 25%</span>
    <span>різка межа</span>
</div>

body {
    font-family: sans-serif;
    font-size: 14px;
    padding: 24px;
}

.row {
    display: flex;
    gap: 14px;
}

.tile {
    width: 150px;
    height: 100px;
    border: 1px solid #cfd4d9;
}

.labels span {
    width: 152px;
    text-align: center;
}

.a {
    background-image: radial-gradient(#ffffff, #2f6f9f);
}

.b {
    background-image: radial-gradient(circle, #ffffff, #2f6f9f);
}

.c {
    background-image: radial-gradient(circle at 25% 25%, #ffffff, #2f6f9f);
}

.d {
    background-image: radial-gradient(circle 40px at 50% 50%,
                      #e74c3c 0 100%, #f2f4f6 100%);
}