Писати синтаксис градієнта вручну незручно: кут, порядок стопів і відсоткові позиції взаємопов'язані, а одна описка непомітно ламає весь background. Цей генератор тримає перегляд і код у повній синхронності - те, що ви бачите, це побайтово той самий CSS, який ви копіюєте. Усе виконується на стороні клієнта, тож жоден ваш дизайн нікуди не завантажується.
Безкоштовний CSS Gradient Generator
Працює повністю у вашому браузері - без завантаження на сервер і без реєстрації.
Тип
Кольорові стопи
Код CSS
Що таке CSS gradient generator?
CSS gradient generator - це візуальний інструмент, який сам будує код linear-gradient(), radial-gradient() або conic-gradient(). Оберіть кольори, перетягніть позиції стопів, задайте кут - і копіюйте готовий до вставки CSS, поки живий перегляд показує саме те, що відрендерить браузер. Усе працює прямо у вашому браузері.
Як користуватися
- 1Оберіть тип градієнта. Виберіть linear, radial або conic. Linear показує повзунок кута; radial додає форму (коло чи еліпс) і позицію; conic має початковий кут і позицію.
- 2Налаштуйте кольорові стопи. Клацніть по кожному зразку, щоб обрати колір, і перетягніть повзунок, щоб змістити стоп уздовж градієнта. Додайте до 8 стопів або приберіть їх до мінімум 2.
- 3Змініть напрямок. Перетягніть повзунок кута (0-360 градусів) або оберіть ключове слово позиції. Перегляд оновлюється миттєво з кожною зміною.
- 4Скопіюйте CSS. Натисніть Copy, щоб отримати оголошення background разом із запасним рядком суцільного кольору, і вставте його у свій stylesheet.
Кому це знадобиться
- Front-end розробники, яким потрібен фон для hero-блока, картки чи кнопки і хочеться отримати точний рядок
linear-gradient(), не заучуючи синтаксис. - Веб- та UI-дизайнери, що відтворюють макет: збирають градієнт візуально, а готовий CSS одразу передають команді розробки.
- Автори email-розсилок і лендингів, яким потрібен запасний рядок з суцільним кольором, щоб дизайн коректно деградував у старих поштових клієнтах - вивід включає його автоматично.
- Студенти, що вивчають CSS і хочуть у реальному часі побачити, як кут, кольорові стопи й тип градієнта змінюють результат.
Часті запитання
Цей CSS gradient generator безкоштовний?
Так - на 100% безкоштовний, без реєстрації, без водяних знаків, без обмежень. Створюйте скільки завгодно градієнтів і копіюйте CSS прямо в проєкт.
Чи щось завантажується на сервер?
Ні. Градієнт будується і відображається повністю у вашому браузері на звичайному JavaScript. Жодні кольори, код чи дані про використання нікуди не надсилаються.
Чим відрізняються linear, radial і conic градієнти?
Linear-градієнт змішує кольори вздовж прямої лінії під обраним кутом. Radial-градієнт розходиться від центральної точки у формі кола чи еліпса. Conic-градієнт обертає кольори навколо центральної точки, як колірне коло або кругова діаграма.
Як працюють кольорові стопи в CSS градієнтах?
Кожен стоп поєднує колір із позицією від 0% до 100% уздовж лінії градієнта. Браузер плавно змішує сусідні стопи. Якщо поставити два стопи в одній позиції, замість плавного переходу утвориться різка межа - це корисно для смуг і ефектів кругової діаграми.
Які браузери підтримують такі градієнти?
Усі сучасні браузери - Chrome, Firefox, Safari та Edge - підтримують linear-gradient() і radial-gradient() без префіксів; conic-gradient() підтримується всюди з 2020 року. Скопійований код також містить запасний варіант із суцільним кольором для старіших браузерів.
Чи можна використати згенерований градієнт як колір тексту?
Не напряму - градієнти є зображеннями, а не кольорами. Застосуйте градієнт як background-image до текстового елемента, а потім додайте background-clip: text і color: transparent, щоб градієнт просвічував крізь літери.
Чому в моєму градієнті видно смуги (banding)?
Смуги з'являються, коли два далекі стопи змішуються на довгій ділянці схожих відтінків, через що стають помітними 8-бітні кольорові кроки. Це можна зменшити, додавши проміжний кольоровий стоп, скоротивши відстань змішування або обравши кольори, що відрізняються не лише відтінком, а й яскравістю.