Генератор CSS-градієнтів
Створіть лінійні, радиальні та конічні CSS-градієнти у вашому браузері.
Зупинки кольору
Використовуйте ручки зупинок або клавіші зі стрілками для редагування позицій. Кожна зупинка включає явний колір, непрозорість та відсоток.
Локальна обробка в браузері
Ваш градієнт залишається в цьому браузері. Жодних кольорів або згенерованих CSS не надсилається на Convertr.
Обмежена граматика імпорту
Імпорт приймає linear-gradient(), radial-gradient() або conic-gradient() з шістнадцятковими кольорами та відсотками. Оголошення, URL-адреси, змінні та невідомі функції відхиляються локально.
Доступний резервний колір
Згенерований CSS включає суцільний резервний фоновий колір разом із градієнтом для непідтримуваних рендерів та доступного елемента керування.
Поширені запитання
Чи завантажується мій градієнт?
Ні. Стан градієнта, кольори, імпортований CSS та згенерований CSS залишаються у вашому браузері.
Які CSS-типи градієнтів підтримуються?
Генератор створює вихідний код linear-gradient(), radial-gradient() та conic-gradient() з кількома шістнадцятковими зупинками кольору.
Що можна імпортувати?
Імпорт приймає навмисно обмежену граматику з використанням однієї підтримуваної функції градієнта, шістнадцяткових кольорів, необов'язкових відсотків та обмежених значень кута або позиції.
Пов'язані інструменти для розробників та дизайну
Генератор CSS-градієнтів
Створюйте лінійні або радіальні градієнти CSS і переглядайте колірні зупинки, кут, позицію та повторення.
- Вхід
- тип градієнта, колірні зупинки, позиції, кут та налаштування повторення.
- Вихід
- попередній перегляд і декларація CSS фону, яку можна скопіювати.
- Реальні обмеження
- Рендеринг браузера може трохи відрізнятися залежно від двигуна, і інструмент не оцінює контраст або не гарантує підтримку в застарілих браузерах.
- Конфіденційність та обробка даних
- тип градієнта, колірні зупинки, позиції, кут та параметри повторення обробляються в цій вкладці браузера. Convertr не отримує та не зберігає його; закриття або перезавантаження сторінки очищає робочий стан, якщо інструмент явно не пропонує локальне завантаження.
Як використовувати цей інструмент
- Надайте тип градієнта, колірні зупинки, позиції, кут та параметри повторення в елементах керування інструментом.
- Виберіть налаштування, які впливають на попередній перегляд у реальному часі та копійоване CSS-оголошення фону, а потім запустіть інструмент.
- Перегляньте живий попередній перегляд і копійоване CSS-оголошення фону перед копіюванням або завантаженням.
Поширені режими збою
Відсутність колірної зупинки, недійсний колір або несумісна позиція перешкоджають створенню дійсного CSS-оголошення.
Корисний приклад
Створіть лінійний градієнт на 90 градусів від #111827 на 0% до #f59e0b на 100% і скопіюйте оголошення.