Створіть CSS-градієнт і скопіюйте код
Цей генератор CSS-градієнтів візуально створює фони <code>linear-gradient()</code>, <code>radial-gradient()</code> і <code>conic-gradient()</code>. Клацніть на смугу точок, щоб додати колір, перетягніть точки на місце, задайте прозорість кожної, потім налаштуйте кут, форму чи центр — превʼю оновлюється одразу. Скопіюйте CSS із суцільним резервним кольором, готовий клас Tailwind або експортуйте градієнт у PNG будь-якого розміру. Вставте градієнт зі своєї таблиці стилів, щоб відредагувати його тут. Усе працює локально у вашому браузері.
Як зробити CSS-градієнт
- 1Виберіть Лінійний, Радіальний або Конічний чи почніть з одного з шаблонів.
- 2Клацніть будь-де на смузі, щоб додати точку кольору, перетягуйте точки, а щоб видалити точку у фокусі, натисніть Delete. Стрілки зсувають точку у фокусі на 1%, Shift+стрілка — на 10%.
- 3Виберіть колір і прозорість кожної точки. Підходить будь-який колір CSS: hex,
rgb(),hsl(),oklch()або назва кольору. - 4Задайте кут на круговій шкалі (утримуйте Shift для кроку 15°), а для радіальних і конічних градієнтів перетягуйте по превʼю, щоб змістити центр.
- 5Скопіюйте CSS або клас Tailwind чи задайте ширину й висоту та завантажте PNG.
Лінійні, радіальні та конічні градієнти
- linear-gradient()
- Кольори змінюються вздовж прямої лінії під заданим кутом. <code>0deg</code> спрямований угору, <code>90deg</code> — праворуч; ключові слова <code>to right</code> і <code>to bottom left</code> означають те саме словами. Лінія градієнта рівно такої довжини, щоб кути отримали перший і останній колір.
- radial-gradient()
- Кольори розходяться від центру колом або еліпсом. Ключове слово розміру визначає, де будуть 100%: <code>farthest-corner</code> (за замовчуванням) сягає найдальшого кута блока, <code>closest-side</code> зупиняється біля найближчого краю.
- conic-gradient()
- Кольори обходять центр, як стрілки годинника, починаючи з кута <code>from</code>. Різкі переходи дають змогу малювати кругові діаграми й колірні кола без зображень.
Точки кольору, різкі краї та прозорість
Кожна точка кольору — це колір і позиція. Між двома точками браузер плавно змішує кольори; якщо дві точки мають однакову позицію, колір змінюється різко — так малюють смуги, прапори й кругові діаграми. Задайте один колір двом сусіднім точкам, щоб отримати суцільну смугу.
Точки можуть бути частково прозорими, тож градієнт може плавно розчиняти зображення в сторінці або затемнювати низ головної картинки, щоб білий текст залишався читабельним. Сучасні браузери змішують прозорі точки в попередньо помноженому кольорі, тому перехід до transparent більше не сіріє посередині, але генератор усе одно пише явний колір rgba() для наочності.
Повторювані градієнти
repeating-linear-gradient() і його радіальний та конічний аналоги повторюють візерунок між першою й останньою точкою по всьому блоку. Увімкніть Повтор і пересуньте останню точку помітно раніше 100%, наприклад на 10%, щоб отримати смуги, кільця чи промені. Якщо остання точка стоїть на 100%, повторюваний градієнт виглядає точно так само, як звичайний.
Резервний колір, Tailwind та експорт у PNG
Градієнти — це зображення, тому браузер, який не вміє їх малювати, нічого не покаже під вашим текстом. Необовʼязковий резервний рядок спочатку задає суцільний background — середнє значення ваших точок, а рядок із градієнтом після нього перекриває його скрізь, де градієнти працюють.
Вивід для Tailwind — це клас із довільним значенням, наприклад bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Пробіли замінюються підкресленнями, бо в назвах класів Tailwind не може бути пробілів; це працює в Tailwind 3 і 4 без жодного налаштування.
Експорт у PNG малює той самий градієнт на canvas у вибраному розмірі, до 8192 пікселів по кожній стороні, — для шпалер, картинок для соцмереж чи дизайн-програм, які не читають CSS. Підберіть кольори під текст за допомогою перевірки контрасту, переводьте їх між форматами в конвертері кольорів або додайте глибини в генераторі box-shadow.
Редагування готового градієнта
Вставте градієнт у поле Імпорт: просто linear-gradient(…), ціле оголошення background: або background-image:, версію з префіксом -webkit- чи клас Tailwind bg-[…]. Розпізнаються напрямки на кшталт to top right, кути в deg, turn або rad, точки з двома позиціями й точки без позицій. Позиції в пікселях і підказки кольору не можна показати на відсотковій смузі, тому вони наближуються, і імпорт про це повідомляє.
Поширені запитання
- Як зробити градієнтний фон у CSS?
- Задайте властивості background (або background-image) функцію градієнта, наприклад background: linear-gradient(90deg, #ff7e5f, #feb47b);. Цей генератор напише такий рядок за вас, за бажання із суцільним резервним кольором перед ним.
- Чим відрізняються лінійний, радіальний і конічний градієнти?
- Лінійний градієнт змінює колір уздовж прямої лінії, радіальний розходиться від центру колами чи еліпсами, а конічний обходить центр, як стрілка годинника.
- Як зробити різкий край або смуги?
- Поставте дві точки різного кольору в одну позицію. Для повторюваних смуг увімкніть Повтор і поставте останню точку на невелике значення, наприклад 10%.
- Чи може CSS-градієнт бути прозорим?
- Так. Зменште непрозорість точки, і генератор запише її як rgba(). Градієнт від кольору до прозорості — поширений спосіб плавно розчинити зображення чи накладку в сторінці.
- Як використати градієнт у Tailwind CSS?
- Скопіюйте клас Tailwind — довільне значення на кшталт bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] — і додайте його до елемента. Вбудовані утиліти Tailwind from-/via-/to- охоплюють лише прості лінійні градієнти, а довільне значення підтримує будь-який.
- Чи працюють конічні градієнти в усіх браузерах?
- conic-gradient() працює в усіх актуальних версіях Chrome, Edge, Firefox і Safari. Додайте резервний колір, якщо ви досі підтримуєте дуже старі браузери.
- Чи можна завантажити градієнт як картинку?
- Так. Вкажіть ширину й висоту та завантажте PNG. Зображення малюється у вашому браузері точно в цьому розмірі, до 8192 × 8192 пікселів.
- Чи щось вивантажується на сервер?
- Ні. Превʼю, CSS і експорт у PNG створюються прямо у вашому браузері.