ГоловнаІнструменти дизайнуГенератор градієнтів

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

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

Про цей інструмент

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

Як користуватися

  1. Оберіть тип градієнта: лінійний, радіальний або конічний.
  2. Задайте кут повзунком (0–360°).
  3. Виберіть два кольори або позначте «Використати 3 кольори», щоб додати третій.
  4. Натисніть «Копіювати CSS» і вставте правило background у свою таблицю стилів.

Корисно знати

  • linear-gradient() змішує кольори вздовж прямої, заданої кутом; 90deg означає напрямок зліва направо.
  • radial-gradient(circle, …) розходиться кольорами від центру назовні.
  • conic-gradient(from <angle>, …) розгортає кольори навколо центральної точки, що зручно для кругових діаграм і колірних кіл.
  • CSS-градієнти — це зображення, які малює браузер, тому вони масштабуються до будь-якого розміру без додаткової ваги файлів.
  • Усі три функції градієнтів підтримуються в кожному сучасному популярному браузері.

Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.

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

Як зробити градієнт у CSS?

Використайте функцію градієнта як фон, наприклад background: linear-gradient(135deg, #1db954, #0a1628). Цей інструмент напише такий рядок за вас на основі обраних кольорів і кута.

Чим відрізняються лінійні, радіальні та конічні градієнти?

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

Чи може градієнт мати більше двох кольорів?

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

Чи сповільнюють CSS-градієнти сайт?

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