Безкоштовний конвертер

Градієнт CSS Генератор

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

Попередній перегляд
Вихід CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Кут (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

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

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

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

  1. Виберіть тип градієнта: лінійний або радіальний.
  2. Додайте кольорові зупинки, клацнувши панель градієнта та вибравши кольори.
  3. Налаштуйте кут градієнта (лінійний) або положення (радіальний) за допомогою елементів керування.
  4. Скопіюйте згенерований CSS-код із панелі виводу.

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

Чи працюють градієнти CSS у всіх браузерах?
Сучасні градієнти CSS (лінійний градієнт, радіальний градієнт) підтримуються в усіх поточних браузерах, включаючи Chrome, Firefox, Safari та Edge. Інструмент може додатково генерувати префікси -webkit- для старих версій браузера.
Чи можна створювати багатоколірні градієнти?
так Додайте стільки кольорових зупинок, скільки потрібно. Ви також можете налаштувати положення кожної зупинки, щоб контролювати змішування кольорів. Це дозволяє створювати складні веселкові градієнти, градієнти заходу сонця або спеціальні градієнти бренду.
Яка різниця між лінійним і радіальним градієнтами?
Лінійні градієнти передають кольори по прямій лінії (зверху вниз, зліва направо, по діагоналі або під будь-яким кутом). Радіальні градієнти передають кольори назовні від центральної точки в круглу або еліптичну форму.
Чи можна використовувати градієнт як фон для тексту?
так Використовуйте background-clip: text з -webkit-text-fill-color: transparent, щоб застосувати градієнт до тексту. Згенерований CSS надає визначення градієнта — поєднайте його з цими властивостями для градієнтного тексту.