Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Генератор градієнтів CSS створює оголошення background із двох кольорів. Виберіть лінійний, щоб кольори переходили вздовж лінії під будь-яким кутом, або радіальний, щоб вони розходилися колом від центру назовні. Попередній перегляд оновлюється, щойно ви змінюєте налаштування, а в полі результату — готовий до вставлення рядок, наприклад background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
У лінійному градієнті кут задає напрямок: 0deg — знизу вгору, 90deg — зліва направо, а 180deg — згори вниз. Радіальний градієнт ігнорує кут і використовує circle, тож перший колір опиняється в центрі. Обидві форми підтримуються в усіх сучасних браузерах без вендорних префіксів, тож згенерований рядок працює як є.
Коли використовувати
- Ненав’язливий двоколірний фон для hero-секції чи кнопки заклику до дії.
- Заміна фонового зображення з градієнтом на CSS, щоб сторінка завантажувала на один файл менше.
- Порівняння пар фірмових кольорів поруч, перш ніж закріпити їх у дизайн-системі.
- Створення м’якого радіального сяйва за логотипом чи ілюстрацією.
Приклад
Введення
Тип: лінійний
Кут: 90
Кольори: #3b82f6, #8b5cf6Виведення
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Запитання про цей інструмент
Як додати третій колір?
Допишіть його до списку всередині функції через кому: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). Кожному кольору можна також задати позицію, наприклад #8b5cf6 40%, щоб керувати тим, де відбувається перехід.
Чи залишиться текст на градієнті читабельним?
Перевірте колір тексту щодо обох кінців градієнта за допомогою перевірки контрасту кольору. Якщо один кінець не проходить, затемніть його або додайте за текстом напівпрозорий шар.
Чи можна використати градієнт для рамки чи заливки тексту?
Так, з додатковим CSS. Для тексту задайте градієнт як background, а потім додайте background-clip: text і color: transparent. Для рамок border-image приймає ту саму функцію градієнта.
Чому на моєму градієнті видно смуги?
Смуги (бандинг) з’являються, коли два схожі кольори розтягнуто на велику площу. Виберіть кольори, що більше відрізняються, зменште площу або додайте проміжну точку, щоб кожен крок був меншим.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.