---

Що таке CSS-градієнт?

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

Як користуватися генератором CSS-градієнтів

1. Виберіть готовий варіант зі зразків або налаштуйте власний градієнт.

2. Виберіть тип градієнта: linear, radial або conic.

3. Налаштуйте кут (для linear/conic) або форму (для radial).

4. Редагуйте кольорові зупинки — змінюйте кольори та позиції (0–100%).

5. Додавайте або видаляйте кольорові зупинки за потреби.

6. Скопіюйте CSS та вставте його у свою таблицю стилів.

Часто задавані запитання

Як зробити прозорий градієнт? Використовуйте значення кольорів rgba() або hsla() з альфа-каналом 0 для повної прозорості. Наприклад, зупинка кольору rgba(0,0,0,0) — це повністю прозорний чорний колір, корисний для згасання накладень на зображеннях.

Як створити жорстку зупинку кольору (без переходу)? Розташуйте дві зупинки кольору в одній позиції — одна закінчується, а інша починається в цій точці. Наприклад, червоний 50%, синій 50% створює миттєве перемикання з червоного на синій у середині без переходу градієнта.

Які браузери підтримують конічні градієнти? Конічні градієнти підтримуються у всіх сучасних браузерах (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Вони не підтримуються в Internet Explorer.

Чи можу я використовувати кілька градієнтів на одному елементі? Так. CSS фон приймає розділений комами список шарів. Ви можете укладати градієнти, поєднувати їх із фоновими зображеннями та керувати положенням і розміром кожного шару незалежно.

Keywords: генератор CSS-градієнта, лінійний градієнт, радіальний градієнт, конічний градієнт, генератор CSS-фону, вибір кольору градієнта, інструмент CSS-градієнт