Генератор градієнтів
Створюйте лінійні, радіальні та конічні CSS-градієнти з нуля за допомогою перетягуваного мульти-стопового керування та готових пресетів. Миттєво скопіюйте готовий CSS.
background: —;
Все обчислюється в реальному часі у вашому браузері — без реєстрації, повністю безкоштовно.
Про Генератор градієнтів
Gradient Generator створює власні CSS-градієнти з нуля. Оберіть лінійний, радіальний чи конічний тип, встановіть кут і сформуйте суміш за допомогою редактора з кількома точками: перетягуйте маркери для переміщення точок, клацайте смугу для додавання нових і перефарбовуйте будь-яку точку за допомогою піпетки — живий попередній перегляд оновлюється в процесі роботи.
Підготовлені пресети дають сильну відправну точку, коли не хочеться починати з чистого аркуша, а дії в один клік — випадковий, реверс, обертання на 45° — прискорюють дослідження. Згенерований CSS завжди видимий і синхронізований з попереднім переглядом, тож те, що ви копіюєте, точно відповідає побаченому.
Усе обчислюється наживо у вашому браузері безкоштовно. Скопіюйте повне правило CSS або лише значення background і вставте його в таблицю стилів, стиль кнопки чи hero-секцію — простий генератор CSS-градієнтів для фонів, накладень і акцентів інтерфейсу.
Як використовувати Генератор градієнтів
- Оберіть тип градієнта: лінійний, радіальний або конічний.
- Почніть з пресету або натисніть «Random» для миттєвої відправної точки.
- Перетягуйте маркери точок для розташування кольорів, клацайте смугу для додавання точок і редагуйте колір кожної точки.
- Налаштуйте кут або скористайтеся «Reverse» та «Rotate 45°», щоб переорієнтувати суміш.
- Скопіюйте правило CSS або значення background і вставте його у свій проєкт.