Генератор градієнтів
Створюйте багатошарові лінійні, радіальні й конічні градієнти
Генератор градієнтів
Створюйте багатошарові лінійні, радіальні й конічні градієнти
Порада: Перетягуйте маркери на прев'ю, щоб змінити напрямок градієнта. Перетягуйте точки на смузі, щоб змістити їх, а вкладки шарів — щоб змінити їхній порядок.
CSS-код
background-image + background-color
Як працює генератор градієнтів
Створюйте багатошарові лінійні, радіальні й конічні CSS-градієнти. Налаштовуйте колірні точки візуально й копіюйте готовий до продакшну CSS.
Багатошарові градієнти
Накладайте кілька шарів градієнтів і змішуйте їх візуально. Кожен шар має власний тип, кольори й кут. Поєднуйте лінійні, радіальні й конічні градієнти в одному елементі.
Точні колірні точки
Додавайте, переміщуйте й видаляйте колірні точки на візуальній смузі. Налаштовуйте позицію й непрозорість кожної точки. CSS оновлюється в реальному часі, поки ви перетягуєте.
Лінійні, радіальні й конічні
Для кожного шару — один із трьох типів градієнта. Задавайте кут для лінійного, форму й позицію для радіального та початковий кут для конічного. Поєднуйте різні типи в шарах.
Копіювати CSS
Копіюйте повний CSS фону з усіма шарами в один клік. Код використовує стандартний синтаксис CSS-градієнтів, який підтримують усі сучасні браузери.
Часті запитання
Лінійний градієнт змінює кольори вздовж прямої під заданим кутом. Радіальний розходиться від центральної точки назовні колом чи еліпсом. Конічний обертає кольори довкола центру, як секторна діаграма. Кожен тип дає свій візуальний ефект.
Так. CSS дозволяє накладати кілька градієнтів в одній властивості background через кому. Цей інструмент спрощує додавання шарів, зміну їхнього порядку й перегляд спільного результату.
Колірна точка задає колір у певній позиції на лінії градієнта (від 0% до 100%). Браузер плавно інтерполює кольори між сусідніми точками. Що більше точок, то точніше ви керуєте переходами кольорів.
Так. Лінійні, радіальні й конічні CSS-градієнти підтримують усі сучасні браузери, зокрема Chrome, Firefox, Safari та Edge. Конічні градієнти отримали повну підтримку останніми — вони працюють усюди з 2020 року.