CSS приклад: -webkit-radial-gradient

Градієнт CSS: як створити радіальний градієнт

Підручник для встановлення радіального градієнту в браузерах Chrome і Safari.

Синтаксис

background-image: -webkit-radial-gradient([<угол> || <позиція>,] [<форма> || <розмір>,] <колір> [, <колір>]*);

Значення

<угол>
Див. кут. Впливає лише при еліптичному градієнті.
<позиція>
Позиція точки записується аналогічно значенням властивості background-position за допомогою ключових слів або доступних одиниць вимірювання, таких як пікселі або відсотки.
<форма>
Встановлює форму радіального градієнту — коло (circle) або еліпс (ellipse), які відрізняються зовнішнім виглядом. За замовчуванням встановлюється еліптичний градієнт.
<колір>
Представляє собою значення кольору, за яким йде необов'язкове розташування кольору відносно вісі градієнту.
<розмір>
Встановлює розмір градієнту.

Приклад

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градієнт</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>
Градієнт

Часті запитання

  • Q: Як використовувати -webkit-radial-gradient в CSS?

    A: Для використання -webkit-radial-gradient в CSS потрібно вказати властивість background-image зі значенням -webkit-radial-gradient() та вказати параметри градієнту.

  • Q: Як створити радіальний градієнт в CSS за допомогою -webkit-radial-gradient?

    A: Для створення радіального градієнту в CSS за допомогою -webkit-radial-gradient() потрібно вказати центр градієнту та радіус, а також колірні стопи для плавного переходу кольорів.

  • Q: Де використовують -webkit-radial-gradient в CSS?

    A: -webkit-radial-gradient використовується в CSS для створення радіальних градієнтів на веб-сторінках, наприклад, для заднього фону елементів або для стилізації тексту.

  • Q: Як вказати кольорові стопи в -webkit-radial-gradient?

    A: Для вказання кольорових стопів в -webkit-radial-gradient потрібно вказати кольори та їх позиції в параметрах функції, наприклад, через круглі дужки та коми.

  • Q: Як змінити форму та розмір радіального градієнту в CSS?

    A: Форму та розмір радіального градієнту в CSS можна змінити, вказавши відповідні значення для центру, радіусу та кольорових стопів у -webkit-radial-gradient().