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

Що робить інструмент

Генератор CSS-градієнтів дає змогу налаштувати градієнт на око й скопіювати готовий CSS. Оберіть лінійний, радіальний або конічний градієнт, додайте скільки завгодно колірних точок, пересувайте їх, задайте кут або центр — перегляд оновлюється миттєво. Можна також вставити наявний linear-gradient(…), radial-gradient(…) чи conic-gradient(…) і редагувати його візуально. Усе працює у вашому браузері.

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

1. Почніть із шаблону або залиште приклад.
2. Оберіть Тип. Лінійні та конічні градієнти мають кут; радіальні та конічні мають центр, який пересувають повзунками Центр X і Центр Y.
3. Редагуйте Колірні точки: змініть колір піпеткою або введіть будь-який CSS-колір, перетягніть Позицію, кнопкою + Додати точку вставте точку в найбільший проміжок, а Розвернути змінить порядок на протилежний.
4. Увімкніть Повторювати, щоб отримати смуги та кільця.
5. Скопіюйте код із картки CSS, за потреби із суцільним запасним кольором для дуже старих браузерів.

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

Приклад

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Поради для гарних градієнтів

• Стриманість. Два сусідні відтінки (синій і фіолетовий, помаранчевий і рожевий) переходять м’якше, ніж протилежні кольори, які посередині можуть ставати брудно-сірими.
• Середня точка керує змішуванням. Третя точка, трохи світліша за сусідів, дає м’який відблиск.
• Різкі точки створюють фігури. Точки з однаковою позицією дають чіткі межі: смуги, прапори, індикатори прогресу та кругові діаграми.
• Напрямки. to right дорівнює 90deg, а to bottom (за замовчуванням) — 180deg. Кут відлічується від верху за годинниковою стрілкою.
• Текст на градієнті має бути читабельним по всій площі. Перевірте найсвітлішу й найтемнішу точки з кольором тексту в інструменті перевірки контрасту.