CSS Генератор Градієнтів

Що таке CSS-градієнти?

CSS-градієнти створюють плавні, безперервні переходи між двома або більше кольорами без використання зображень. Вони відображаються браузером нативно, що означає масштабування до будь-якої роздільної здатності, миттєве завантаження та нульові HTTP-запити. Градієнти є одним із найпотужніших інструментів сучасного CSS для створення візуально насичених фонів, кнопок і декоративних елементів.

Існує два основних типи CSS-градієнтів: лінійні, що переходять вздовж прямої лінії, та радіальні, що розходяться від центральної точки назовні. Третій тип — конічні градієнти — огинають центральну точку, як колірне колесо. Цей інструмент зосереджується на лінійних і радіальних градієнтах, що покривають переважну більшість потреб у дизайні.

Синтаксис CSS-градієнтів

Функція linear-gradient() приймає напрямок (кут або ключове слово), за яким ідуть точки зупинки кольору. Базовий синтаксис: background: linear-gradient(angle, color1 position1, color2 position2). Кут вимірюється у градусах — 0deg іде знизу вгору, 90deg зліва направо, 180deg зверху вниз. Можна додавати скільки завгодно точок зупинки кольору.

Радіальні градієнти використовують radial-gradient(shape size at position, color1, color2). Форма може бути circle або ellipse. Ключові слова розміру (closest-side, farthest-corner тощо) контролюють, наскільки далеко поширюється градієнт. Якщо їх не вказати, браузер використовує стандартні значення, які зазвичай виглядають коректно.

Як користуватися цим інструментом

Виберіть кольори за допомогою палітр, відрегулюйте кут градієнта за допомогою повзунка або введіть значення у градусах, а також додайте або видаліть точки зупинки кольору за потреби. Інструмент генерує CSS-код у реальному часі. Натисніть кнопку копіювання, щоб скопіювати повне CSS-правило в буфер обміну, а потім вставте його у свою таблицю стилів.

Поради щодо дизайну градієнтів

Тонкі градієнти виглядають більш професійно, ніж різкі. Зміна відтінку на 10–20 градусів між двома близькими кольорами створює елегантний, сучасний вигляд. Уникайте поєднання більш ніж трьох кольорів, якщо ви навмисно не створюєте ефект веселки. Великі площі краще сприймають м'які градієнти, тоді як невеликі елементи інтерфейсу, як-от кнопки, можуть витримати більш сміливі переходи.

Для темних тем накладання градієнтів на темне тло додає глибини, не відволікаючи. Використовуйте напівпрозорі точки зупинки кольору (rgba або hsla) для ефектів скла. Накладайте кілька градієнтів через коми у властивості background для складних композицій.

Питання продуктивності

CSS-градієнти прискорюються GPU і надзвичайно продуктивні — набагато краще, ніж завантаження зображень з градієнтами. Однак дуже складні градієнти з багатьма точками зупинки кольору можуть спричиняти незначні відмінності у відображенні між браузерами. Завжди перевіряйте градієнти у Chrome, Firefox і Safari. Сучасні браузери підтримують градієнти без вендорних префіксів, тому -webkit-linear-gradient більше не потрібний.

Часті запитання

Чи можна анімувати CSS-градієнти?

CSS не може безпосередньо анімувати значення градієнтів за допомогою transition. Однак можна анімувати background-position для надмірно великого градієнта, використовувати @property для анімації кастомних властивостей всередині градієнтів або переходити між двома градієнтами за допомогою opacity на псевдоелементах.

У чому різниця між лінійним і радіальним градієнтами?

Лінійний градієнт переходить між кольорами вздовж прямої лінії під заданим кутом. Радіальний градієнт переходить від центральної точки назовні у круглій або еліптичній формі. Обирайте лінійний для фонів і банерів, а радіальний — для ефектів прожектора або підсвітки кнопок.