CSS Gradient Generator

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

Про CSS Gradient Generator

Що це

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

Основні можливості

  • Лінійні, радіальні й конічні градієнти, зокрема повторювані.
  • Точки кольорів, які ви додаєте, перетягуєте й видаляєте на інтерактивній шкалі, кожна зі своєю прозорістю.
  • Кут, форма й позиція центру.
  • Інтерполяція в sRGB, HSL, OKLab чи OKLCH.
  • Код як CSS, Tailwind чи SVG; випадковий градієнт для натхнення.

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

  1. Оберіть тип градієнта або натисніть кнопку випадкового градієнта, щоб почати з ідеї.
  2. Клацніть по шкалі, щоб додати точки, перетягніть їх і задайте кожній колір і прозорість.
  3. Налаштуйте кут, форму чи позицію й, за бажанням, колірний простір.
  4. Скопіюйте код у потрібному форматі.

Коли корисно

  • Зробити градієнт для фону чи кнопки на сайті.
  • Отримати плавний градієнт без сірої середини, яку дає звичайне змішування в sRGB.
  • Перетворити градієнт на SVG для ілюстрації чи іконки.

Конфіденційність та обмеження

Ваші дані

Градієнт будується в браузері, і нічого не надсилається на сервер — сайт отримує лише анонімну подію «інструмент відкрито». Результат, надісланий в інший інструмент, зберігається на цьому пристрої 24 години в «Останніх діях».

Обмеження

  • У SVG немає конічних градієнтів: конічний експортується в SVG як лінійний.
  • SVG завжди змішує кольори в sRGB, тож градієнт в OKLab чи OKLCH виглядатиме там трохи інакше.

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

Який колірний простір обрати?

OKLCH чи OKLab дають рівні, насичені переходи — наприклад, від синього до жовтого без тьмяної сірої середини. sRGB відповідає тому, що роблять старіші інструменти.

Чому SVG виглядає не так, як CSS?

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

Чи всі браузери підтримують градієнти в OKLCH?

Усі сучасні — так. Для дуже старих оберіть sRGB, що працює всюди.