Перейти до основного вмісту
LibraTool logoLibraTool

Генератор CSS-градієнтів — безкоштовно

Створюйте лінійні, радіальні та конічні CSS-градієнти з живим попереднім переглядом. Копіюйте CSS одним кліком.

Працює офлайн після завантаження
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Уникає сірих середніх точок між дуже різними кольорами. Додає звичайний рядок sRGB як запасний варіант для старіших браузерів.

0%
100%

Пресети

Типові застосування

  • Створіть Градієнти для Героїчних СекційСпроектуйте фонові градієнти на весь екран для героїчних секцій веб-сайту та посадкових сторінок.
  • Створіть Градієнтні Кнопки та CTAСпроектуйте привабливі фонові градієнти кнопок для призиву до дії, які виділяються.
  • Створіть Фонові Градієнти для КартокСпроектуйте градієнтні заповнення для карток, модальних вікон, бічних панелей і фонів компонентів користувальницького інтерфейсу.
  • Створіть Градієнти для Графіки Соціальних МережСпроектуйте яскраві фонові градієнти для постів Instagram, мініатюр YouTube та карток Twitter.
  • Створіть Кольорові Шкали для ДіаграмГенеруйте градієнтні кольорові шкали для теплових карт, смуг прогресу та візуалізації даних.

Як це працює

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

  1. 1
    Налаштуйте точки й напрям
    Ви задаєте від 2 до 6 колірних точок через нативний вибір кольору браузера, а потім розміщуєте кожну на осі 0–100% повзунком. Для лінійних і конічних градієнтів також вибирається кут (0–360°); для радіальних — форма (еліпс чи коло) та ключове слово розміру, що визначає, наскільки далеко простягається градієнт.
  2. 2
    buildCss збирає рядок градієнта
    При кожній зміні локальна функція buildCss об’єднує параметри в правильний виклик CSS-функції — наприклад, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Бібліотеки не залучаються; рядок будується простою шаблонною логікою JavaScript і об’єднується прямо з масиву точок.
  3. 3
    Живий перегляд рендериться через вбудований стиль
    Зібраний рядок градієнта застосовується прямо до елемента div як вбудований стиль background, тож перегляд рендерить власний CSS-рушій браузера. Без canvas чи зображень — ви бачите буквально застосовану CSS-властивість.
  4. 4
    Готовий до копіювання результат у чотирьох форматах
    Вибір формату перетворює той самий рядок градієнта на простий CSS (background: ...), блок CSS із запасним суцільним кольором, клас Tailwind з довільним значенням або оголошення змінної SCSS. Натискання «Копіювати» записує вибраний результат у буфер обміну через navigator.clipboard.writeText. Поточний градієнт також кодується в хеші URL, тож його можна додати в закладки чи поширити.

Схожі інструменти

🟦

Генератор CSS Grid

Візуально розробіть CSS grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати
↔️

Генератор CSS Flexbox

Експериментуйте з напрямком flex, перенесенням, justify та align на живих елементах — і скопіюйте CSS.

Спробувати
🧮

Калькулятор матриць

Додавайте, віднімайте, множте, транспонуйте, обертайте й спрощуйте матриці, а також знаходьте визначник, ранг, власні значення та розв'язуйте Ax = b — до 8×8, копіювання одним дотиком. Безкоштовно та приватно.

Спробувати

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