▤

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

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

Ваші файли залишаються на цьому пристрої

Файли обробляються у браузері й не надсилаються на сервер. Сайт завантажує код і ресурси для роботи інструментів. Без акаунтів і трекерів.

Натисніть «Завантажити», щоб зберегти інструмент одним HTML-файлом для роботи офлайн.

Конфіденційність →

Тип

Кут (90°)

Колір 1 Позиція 1 (0%)

Колір 2 Позиція 2 (100%)

результат

Спробуйте розібраний приклад

Приклад

Виберіть лінійний тип, задайте кут 135 і кольори #ff7e5f та #feb47b. CSS: background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Якщо зсунути першу точку на 20, перший колір буде суцільним на перших 20 % блоку.

Зважайте

0deg спрямований угору, а 90deg — праворуч, тож 135deg іде з лівого верхнього кута в правий нижній. Якщо на градієнті є текст, перевірте його контраст з обома крайніми кольорами.

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

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

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

Що таке кут у лінійному градієнті?

Кут задає напрямок переходу кольорів: 0° спрямований угору, 90° — праворуч, 180° — донизу тощо.

Коли використовувати радіальний замість лінійного?

Використовуйте радіальний, щоб розходити кольори назовні від центральної точки (наче прожектор); лінійний змішує їх уздовж прямої лінії.