Генератор CSS-градієнтів
Створіть лінійний, радіальний або конічний CSS-градієнт із власними кольоровими переходами та кутом, переглядайте результат у реальному часі й копіюйте готове правило background.
Генератор CSS-градієнтів — Виберіть тип градієнта, задайте кут і додайте стільки кольорових переходів, скільки потрібно, — кожен зі своїм кольором і позицією у відсотках. Вікно попереднього перегляду оновлюється під час редагування, а готове до вставлення правило CSS background показується для копіювання одним кліком. Усе працює повністю у вашому браузері; кольори та CSS ніколи не надсилаються на сервер.
Що таке Генератор CSS-градієнтів?
Генератор CSS-градієнтів — це безкоштовний онлайн-інструмент для вебдизайнерів і фронтенд-розробників, яким потрібен швидкий градієнт без написання синтаксису вручну. Виберіть лінійний, радіальний або конічний градієнт, задайте кут у градусах для лінійного й конічного типів і визначте кольорові переходи, кожен зі своїм HEX-кольором і позицією у відсотках. Під час редагування попередній перегляд показує результат, а відповідне правило CSS background миттєво оновлюється, щоб ви могли скопіювати його прямо в таблицю стилів. Використовуйте його для оформлення кнопок, hero-фонів, карток та оверлеїв або щоб дізнатися, як працюють функції linear-gradient(), radial-gradient() і conic-gradient().
Як користуватися Генератор CSS-градієнтів
- Виберіть тип градієнта: лінійний, радіальний або конічний.
- Для лінійного чи конічного градієнта задайте кут у градусах (0-360); радіальний використовує центроване коло й ігнорує кут.
- Відредагуйте кожен кольоровий перехід: уведіть або виберіть HEX-колір і задайте його позицію у відсотках (0-100).
- Натисніть «Додати перехід», щоб вставити ще один колір, або значок кошика, щоб видалити перехід (щонайменше два переходи зберігаються).
- Стежте за оновленням вікна попереднього перегляду, потім скопіюйте згенероване правило CSS background кнопкою копіювання.
Приклади
Простий двоколірний лінійний градієнт
Вхідні дані
Лінійний, 90deg, #4f86f7 на 0% і #9333ea на 100%
Результат
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
Радіальний градієнт із трьома переходами
Вхідні дані
Радіальний, переходи #ffffff 0%, #4f86f7 50%, #1e3a8a 100%
Результат
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
Конічний градієнт для кольорового кола
Перемкніть тип на конічний, задайте початковий кут і додайте кілька переходів на рівномірно розподілених позиціях, щоб провести кольори навколо центральної точки — зручно для зразків у стилі кругової діаграми або індикаторів завантаження.
Поширені запитання
- Які типи градієнтів підтримуються?
- Три: linear-gradient (з кутом у градусах), radial-gradient (центроване коло) і conic-gradient (з початковим кутом). Перемикайтеся між ними перемикачем типу, і CSS оновлюється миттєво.
- Як працюють кольорові переходи та позиції?
- Кожен перехід має колір і позицію у відсотках від 0 до 100. Переходи записуються в CSS у тому порядку, у якому вони стоять у списку, саме так, як їх інтерпретує браузер, тож ви керуєте порядком напряму. Ви можете додавати переходи кнопкою «Додати перехід» і видаляти їх до мінімуму у два.
- Чи можна вибирати кольори візуально замість уведення HEX?
- Так. Натисніть на маленький зразок кольору поряд із кожним переходом, щоб відкрити вбудовану палітру вашого браузера, або введіть HEX-значення на кшталт #4f86f7 прямо в поле кольору. Попередній перегляд і CSS оновлюються в міру зміни.
- Чому поле кута зникає для радіальних градієнтів?
- Радіальний градієнт тут малюється як центроване коло, яке не використовує кут, тому поле кута показується лише для лінійного й конічного типів, де воно змінює напрямок.
- Чи завантажуються мої кольори або CSS кудись?
- Ні. Градієнт будується повністю у вашому браузері за допомогою локальних обчислень рядків і кольорів — ні кольори, ні CSS, ні налаштування ніколи не надсилаються на сервер, тож він працює офлайн і зберігає вашу роботу приватною.
Схожі інструменти
Код у зображення
Перетворіть фрагмент коду на охайну PNG-картку з підсвічуванням синтаксису прямо у вашому браузері — з темою, градієнтним чи прозорим тлом і відступами, без жодного завантаження на сервер.
Перевірка контрастності кольорів
Перевірте коефіцієнт контрастності WCAG між HEX-кольором тексту й фону та дізнайтеся, чи проходить він AA і AAA для звичайного й великого тексту.
Змішувач кольорів
Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.
Генератор відтінків кольору
Перетворіть один базовий колір HEX на шкалу відтінків 50-950 у стилі Tailwind, змішуючи його з білим і чорним; кожен щабель з-зразком і копійованим HEX.