CodeKitHubЩо це за інструмент?
CSS-градієнти — це зображення, які браузер генерує зі списку кольорів, а не файли, які ви завантажуєте — linear-gradient() переходить між кольорами вздовж прямої лінії під заданим кутом, тоді як radial-gradient() переходить між кольорами назовні від центральної точки. Обидва приймають два або більше кольорових точок, кожну з яких можна необов'язково закріпити на певній позиції вздовж градієнта.
Написані вручну, градієнти легко зробити з непомітною помилкою: неправильний порядок точок, відсутні відсотки або кут у неправильному напрямку (кути в CSS йдуть за годинниковою стрілкою від 'to top', на відміну від математичних кутів). Цей інструмент прибирає синтаксис із дороги — задавайте кольори й позиції за допомогою піпеток і повзунків, спостерігайте, як приклад оновлюється в реальному часі, і копіюйте готовий CSS, коли результат вас влаштує.
Джерело: CSS Images Module Level 3, W3C — специфікація, що визначає синтаксис linear-gradient() і radial-gradient().
Навіщо його використовувати?
- Живий перегляд оновлюється миттєво при будь-якій зміні кольору, позиції чи кута — не потрібно перезавантажувати сторінку, щоб побачити результат.
- Перемикайтеся між лінійним і радіальним градієнтом одним кліком; керування кутом автоматично приховується для радіальних градієнтів, де воно не застосовується.
- Додавайте або видаляйте кольорові точки (від 2 до 4) замість обмеження фіксованим двоколірним градієнтом.
- Кожна точка має власний повзунок позиції, тож точки не мусять бути розташовані рівномірно.
- На виході — готовий до вставки CSS зі стандартним синтаксисом linear-gradient()/radial-gradient().
- Працює повністю у вашому браузері — жодні налаштування нікуди не завантажуються. Безкоштовно, без реєстрації, працює на мобільних.
Як користуватися
- Оберіть тип градієнта — лінійний або радіальний.
- Для лінійного градієнта перетягніть повзунок кута — 90deg йде зліва направо, 180deg — згори донизу, і так далі.
- Задайте колір і позицію для кожної точки; перша точка — початковий колір градієнта, остання — кінцевий.
- Натисніть '+ Додати точку', щоб додати до 4 точок для багатокольорового градієнта, або кнопку ✕, щоб видалити точку (мінімум 2).
- Скопіюйте згенерований CSS і вставте його в оголошення background або background-image.
Приклад
Введення
Лінійний · Кут: 90deg · Точки: #f97316 на 0%, #ec4899 на 100%Результат
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Градієнт зліва направо від помаранчевого до рожевого — поширений стиль для кнопок, банерів і фонів у hero-секціях.
Лінійні проти радіальних градієнтів
Лінійний градієнт переходить між кольорами вздовж прямої лінії, керованої кутом — корисний для банерів, кнопок і напрямлених фонів. Радіальний градієнт переходить між кольорами назовні від центральної точки концентричними кільцями, що підходить для ефектів прожектора, значків чи фонів у стилі світіння. Цей інструмент за замовчуванням встановлює радіальний градієнт у формі кола, відцентрованого в блоці, що покриває найпоширеніший випадок радіального градієнта; CSS також підтримує форму еліпса та позиції поза центром, якщо потрібно доопрацювати результат вручну.
Поширені шаблони градієнтів
- Легкий фірмовий акцент: два близькі відтінки (наприклад, два тони одного кольору) під невеликим кутом для м'якого фонового покриття.
- Контрастна кнопка заклику до дії: два насичені додаткові кольори під кутом 90deg або 135deg для сміливого клікабельного вигляду.
- Накладення на зображення: градієнт від прозорого до суцільного кольору (задайте прозорість через rgba-колір під час подальшого редагування hex-значення піпетки) поверх background-image.
- Багатоточковий райдужний/фірмовий градієнт: 3–4 точки, розподілені по всьому діапазону 0–100%, для плавніших, поступовіших переходів, ніж дозволяє двоколірний градієнт.
- Радіальний прожектор: яскрава центральна точка близько 0%, що переходить у темнішу крайову точку близько 100%, корисно для hero-секцій чи виділення карток.
Поєднання з іншими CSS-інструментами
Градієнти часто поєднують із заокругленими кутами й тінями на одному елементі — картка з градієнтом, м'якою тінню box-shadow і заокругленими кутами — поширений шаблон інтерфейсу. Створіть кожну частину окремо й об'єднайте оголошення CSS на елементі.
→ Генератор box-shadow · Генератор border-radius · Піпетка кольору
Часті запитання
Яка різниця між linear-gradient() і radial-gradient()?
linear-gradient() переходить між кольорами вздовж прямої лінії під заданим кутом. radial-gradient() переходить між кольорами назовні від центральної точки у формах, що розширюються (коло чи еліпс). Обидва приймають той самий тип списку кольорових точок через кому; різниться лише форма переходу.
Як працюють кути CSS-градієнтів?
Кути CSS-градієнтів йдуть за годинниковою стрілкою, починаючи від 'to top' (0deg вказує вгору). 90deg вказує праворуч, 180deg — донизу, а 270deg — ліворуч — протилежна конвенція до стандартних математичних кутів, що часто спантеличує при написанні градієнтів вручну.
Чи можна використати більше 4 кольорових точок?
Так — CSS-градієнти приймають будь-яку кількість кольорових точок через кому. Цей інструмент обмежує інтерактивний конструктор чотирма для зручного інтерфейсу, але ви можете скопіювати згенерований CSS і вручну додати більше записів 'колір позиція%' через кому у своїй таблиці стилів.
Чому мій градієнт виглядає смугастим замість плавного?
Смугастість зазвичай виникає через кольори, які надто далекі за відтінком, при недостатній кількості точок між ними, або через обмежену власну точність кольору браузера при дуже низькому контрасті. Додавання проміжної точки із змішаним кольором або вибір ближчих за відтінком кольорів зазвичай дає плавніший результат.
Чи можна анімувати CSS-градієнт?
Не напряму — градієнти не є анімованими самі по собі так, як background-position чи transform, оскільки браузери не можуть інтерполювати між двома довільними визначеннями градієнта. Поширені обхідні шляхи включають анімацію background-position на збільшеному градієнті або перехід background-color, якщо змінюється лише один колір.