Генератор градієнтів

Створюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.

Тип градієнта
Колірні точки
CSS
Налаштуйте точки та напрямок, щоб створити градієнт.

Кожен градієнт рендериться безпосередньо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo.

Поширені запитання

Яка різниця між лінійним, радіальним та конічним градієнтами?

Лінійний градієнт змішує кольори вздовж прямої лінії під заданим кутом. Радіальний градієнт розповсюджує їх від центру у формі кола чи еліпса. Конічний градієнт розгортає кольори навколо центру, подібно до колірного кола.

Що таке колірні точки (color stops)?

Кожна колірна точка (color stop) — це колір, прив’язаний до певної позиції вздовж градієнта (від 0% на початку до 100% в кінці). Переміщуйте точки, щоб змінювати межі змішування кольорів, або додавайте нові для багатших переходів. Можна використовувати до восьми точок.

Як керувати напрямком градієнта?

Для лінійного або конічного градієнта повзунок кута задає напрямок: 0° вказує вгору, 90° — праворуч. Радіальний градієнт не має кута; замість цього виберіть форму кола чи еліпса, щоб змінити спосіб його розходження.

Написано та перевірено редакційною командою BroBroGo.Останнє оновлення:

Основи CSS-градієнтів та їх типи

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

Інструмент «Генератор градієнтів» підтримує три основні типи градієнтів:

  • Лінійний (Linear): кольори змішуються вздовж прямої лінії. Напрямок цього змішування визначається заданим кутом.
  • Радіальний (Radial): кольори розповсюджуються від центру назовні. Форма такого градієнта може бути круглою або еліптичною.
  • Конічний (Conic): кольори розгортаються навколо центральної точки, нагадуючи колірне коло або рух стрілки годинника.

Лінійні градієнти: налаштування кута та напрямку

Для лінійного градієнта визначальним параметром є напрямок переходу кольорів. У генераторі цей напрямок регулюється за допомогою повзунка кута.

Кут вимірюється у градусах від 0° до 360°:

  • При значенні 0° градієнт спрямований знизу вгору (0° вказує вгору).
  • При значенні 90° градієнт спрямований зліва направо (90° вказує праворуч).

Зміна кута дозволяє точно адаптувати візуальний ефект під геометрію макета, створюючи горизонтальні, вертикальні або діагональні переходи кольорів.

Радіальні градієнти: вибір форми та розподіл кольорів

Радіальний градієнт будується шляхом розходження кольорів від центральної точки до периферії. На відміну від лінійного типу, радіальний градієнт не використовує кут для позиціонування. Замість цього визначається геометрична форма розповсюдження:

  • Еліпс (Ellipse): градієнт розтягується відповідно до пропорцій контейнера, утворюючи овальний перехід.
  • Коло (Circle): кольори розходяться рівномірно в усіх напрямках, зберігаючи ідеальну кругову форму незалежно від співвідношення сторін елемента.

Конічні градієнти: обертання навколо центру

Конічний градієнт створює ефект переходу кольорів, які обертаються навколо центральної точки. Початок і кінець градієнта збігаються в одній лінії, утворюючи характерний стик, якщо початковий і кінцевий кольори суттєво відрізняються.

Для конічного градієнта також використовується налаштування кута, яке визначає початкову точку обертання кольорового спектра. Як і в лінійному типі, кут 0° починає відлік вертикально вгору, а збільшення значення зміщує стартову лінію за годинниковою стрілкою.

Роль колірних точок у дизайні градієнтів

Колірна точка (color stop) — це конкретний колір, жорстко прив'язаний до певної позиції на шкалі градієнта. Позиція вимірюється у відсотках:

  • 0% відповідає самому початку градієнта.
  • 100% відповідає кінцевій точці градієнта.

Генератор дозволяє гнучко керувати структурою переходу:

  1. Початковий стан: за замовчуванням інструмент пропонує дві колірні точки: #6366f1 на позиції 0% та #ec4899 на позиції 100%.
  2. Додавання точок: ви можете додати нові проміжні кольори для створення складніших багатоколірних переходів. Максимально дозволена кількість становить вісім колірних точок.
  3. Значення за замовчуванням: кожна нова додана колірна точка автоматично отримує позицію 50%.
  4. Обмеження інтерфейсу: коли кількість точок досягає восьми, кнопка «Додати точку» стає неактивною.

Практичне використання інструменту

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

Процес роботи складається з кількох кроків:

  • Виберіть тип градієнта у блоці «Тип градієнта».
  • Залежно від типу, встановіть «Кут» або виберіть варіант у блоці «Форма».
  • У розділі «Колірні точки» налаштуйте кольори та їхні позиції. При необхідності скористайтеся кнопками «Додати точку» або «Видалити точку».
  • Результат змін миттєво відображається у вікні попереднього перегляду.
  • Готовий код з'являється у полі «CSS». Натисніть кнопку «Копіювати CSS». Після натискання стан кнопки зміниться, підтверджуючи копіювання.

Кожен градієнт рендериться безпосередньо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo, що забезпечує локальну обробку ваших даних.

FAQ

Яка різниця між лінійним, радіальним та конічним градієнтами? Лінійний градієнт змішує кольори вздовж прямої лінії під заданим кутом. Радіальний градієнт розповсюджує їх від центру у формі кола чи еліпса. Конічний градієнт розгортає кольори навколо центру, подібно до колірного кола.

Що таке колірні точки (color stops)? Кожна колірна точка (color stop) — це колір, прив’язаний до певної позиції вздовж градієнта (від 0% на початку до 100% в кінці). Переміщуйте точки, щоб змінювати межі змішування кольорів, або додавайте нові для багатших переходів. Можна використовувати до восьми точок.

Як керувати напрямком градієнта? Для лінійного або конічного градієнта повзунок кута задає напрямок: 0° вказує вгору, 90° — праворуч. Радіальний градієнт не має кута; замість цього виберіть форму кола чи еліпса, щоб змінити спосіб його розходження.

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор Border RadiusЗаокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор CSS GridЗадавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.Калькулятор CSS clamp()Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV, CMYK та LAB — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.Форматування та мініфікація CSSВирівнюйте заплутаний CSS для зручного читання або мініфікуйте його для публікації — з безпечним режимом, який ніколи не змінює порядок правил.Перевірка контрастностіВведіть кольори тексту та фону, щоб дізнатися коефіцієнт контрастності WCAG та перевірити відповідність стандартам AA й AAA.