Веб-розробка
CSS Gradient Generator
Зібрати лінійний, радіальний чи конічний градієнт з кількох кольорів і отримати готовий CSS.
0° — зверху, далі за годинниковою стрілкою.
CSS-градієнт — це плавний перехід між кількома кольорами, згенерований самим браузером без зображення. Інструмент дозволяє візуально зібрати лінійний, радіальний чи конічний градієнт і одразу скопіювати готовий CSS-код.
Як користуватися
- Додайте кольорові точки (color stops) і перетягніть їх для налаштування позиції переходу.
- Оберіть тип градієнта — лінійний (напрямок у градусах), радіальний (форма й позиція центру) чи конічний (обертання навколо точки).
- Скопіюйте готовий CSS одним натисканням і вставте в background чи background-image.
Типові сценарії
- Підбір фону для hero-секції чи кнопки без відкриття графічного редактора.
- Відтворення градієнта з макета дизайну (Figma тощо) у точному CSS-синтаксисі.
- Швидкий експеримент із кольоровими переходами перед тим, як зафіксувати рішення в дизайн-системі.
Що варто памʼятати
Радіальний градієнт за замовчуванням розтягується під форму елемента (еліпс), а не завжди залишається колом, — це варто врахувати на прямокутних блоках.
Кілька градієнтів можна накласти один на одного через background-image з комою — це працює як шари, де перший у списку зверху.
Стаття про цей інструмент: CSS-градієнти: чим linear відрізняється від radial і conic
Часті запитання
Чим відрізняються лінійні, радіальні та конічні градієнти?
Лінійні градієнти переходять уздовж прямої лінії під обраним кутом, радіальні розходяться назовні від центральної точки у формі кола чи еліпса, а конічні обертають кольори навколо центральної точки, як колірне коло.
Чи підтримуються конічні градієнти в усіх браузерах?
Усі поточні основні браузери підтримують конічні градієнти, але це новіша функція CSS, ніж лінійні чи радіальні градієнти, тож дуже старі версії браузерів можуть їх не відображати.
Що я отримую на виході?
Інструмент генерує готовий до використання синтаксис CSS background з обраними кольорами, стопами й позиціями, який можна вставити прямо у ваш стиль.
Чим repeating-linear-gradient відрізняється від звичайного linear-gradient?
Звичайний linear-gradient розтягує задану послідовність кольорів рівно один раз на весь елемент, тоді як repeating-linear-gradient повторює цю ж послідовність color stops циклічно, створюючи смугастий чи візерунчастий фон.
Чи можна накласти кілька градієнтів один на одного як фон?
Так, властивість background-image приймає список градієнтів через кому, і вони накладаються шарами один на одного за принципом, схожим на накладення кількох фонових зображень — верхній у списку відображається зверху.