Генератор CSS-градієнтів
Створюйте лінійні та радіальні градієнти візуально, а потім копіюйте готовий CSS. Усе оновлюється в реальному часі у вашому браузері.
Як створити CSS-градієнт
- Оберіть лінійний або радіальний градієнт, а потім задайте кут для лінійного.
- Оберіть кольори для точок і задайте позицію кожної від 0 до 100.
- Додавайте або видаляйте точки, щоб формувати перехід на свій смак.
- Скопіюйте згенерований CSS у свій стильовий файл або атрибут style.
Часті запитання
Що таке лінійний градієнт?
Лінійний градієнт плавно змішує кольори вздовж прямої лінії під кутом, який ви обираєте, від 0 до 360 градусів.
Що таке радіальний градієнт?
Радіальний градієнт змішує кольори від центральної точки назовні у круговій або еліптичній формі.
Що означають числа позицій?
Кожна позиція — це відсоток уздовж градієнта: від 0% на початку до 100% у кінці. Точки автоматично сортуються за позицією.
Чи працює градієнт у всіх браузерах?
Так. Згенерований CSS використовує стандартні функції linear-gradient і radial-gradient, які підтримують усі сучасні браузери.
Схожі інструменти
Навіщо використовувати генератор градієнтів?
Використовуйте генератор CSS-градієнтів, щоб візуально створювати плавні переходи кольорів замість здогадок про значення в коді, і миттєво копіюйте готовий до використання CSS.
- Бачте зміну градієнта в реальному часі, коли налаштовуєте кольори, кути та точки.
- Копіюйте точний, дійсний CSS без пошуку синтаксичних помилок.
- Створюйте багатоточкові фони для кнопок, банерів і секцій за секунди.
Поради та обмеження
Ви можете додати скільки завгодно точок кольору, а генератор зберігає принаймні дві, щоб градієнт завжди був дійсним. Точки сортуються за позицією перед генерацією CSS.