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

Як користуватися генератором CSS-градієнтів

1. Виберіть Тип градієнта: Лінійний, Радіальний або Конічний. Велике поле попереднього перегляду вгорі оновлюється після кожної зміни.
2. Для лінійного градієнта задайте Кут повзунком або введіть його в градусах (90° іде зліва направо, 180° – згори донизу). У конічного градієнта кут – це місце, звідки починається розгортка.
3. Для радіальних і конічних градієнтів пересувайте центр полями Центр X і Центр Y. Радіальний градієнт може бути Коло або Еліпс (меню Форма).
4. Редагуйте Опорні кольори. Клацніть будь-де на смузі, щоб додати там точку з тим кольором, який градієнт уже має в цьому місці, або скористайтеся Додати точку, щоб заповнити найбільший проміжок. Перетягніть маркер, щоб пересунути його. У кожної точки також є рядок, де можна вибрати колір, ввести будь-який колір CSS, задати Позиція (%) або Видалити її (градієнт зберігає щонайменше дві точки).
5. За бажання позначте Повторюваний, виберіть Інтерполяція кольорів, натисніть Розвернути, щоб перевернути точки, або Випадковий градієнт для натхнення.
6. Скопіюйте результат із CSS-код кнопкою Копіювати.

Клавіатура: наведіть фокус на маркер на смузі, а потім стрілками переміщуйте його на 1 % (на 10 % із Shift), Home і End – на краї, а Delete видаляє його.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Три функції градієнтів

• linear-gradient() змішує кольори вздовж прямої лінії. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) іде від індиго ліворуч до рожевого праворуч. Кути відраховуються за годинниковою стрілкою від верху: 0deg дивиться вгору, 90deg – праворуч.
• radial-gradient() розходиться від центральної точки. radial-gradient(circle at 30% 40%, …) розміщує центр на 30 % від лівого краю й 40 % від верхнього. Еліпс розтягується разом із блоком, коло лишається круглим.
• conic-gradient() розгортається навколо центру, як стрілки годинника. conic-gradient(from 0deg at 50% 50%, …) створює колірні кола, кругові діаграми й ефекти індикаторів завантаження. Позиції точок – це частки повного оберту.

Параметр Повторюваний використовує repeating-linear-gradient() та його «родичів»: візерунок, заданий вашими точками, повторюється, доки не заповнить блок. Поставте останню точку значно нижче 100 % (наприклад 20 %), щоб побачити смуги чи кільця.

Дві точки в одній позиції створюють різкий край замість плавного переходу, і саме так роблять смуги й прапори. Генератор зберігає точки в коді відсортованими за позицією, як того вимагає CSS.

Інтерполяція sRGB чи OKLCH

За замовчуванням браузери змішують кольори градієнта в sRGB. Між двома насиченими кольорами, як-от синім і жовтим, це часто дає тьмяну сіру чи брудну середину. CSS Color Level 4 дозволяє вибрати простір інтерполяції: linear-gradient(90deg in oklch, …) змішує в перцептивному просторі OKLCH і зберігає яскраву середину.

З OKLCH (плавніше, із запасним sRGB) інструмент записує два оголошення background: спершу класичну версію sRGB, потім версію OKLCH. Браузери, що підтримують простори інтерполяції (Chrome та Edge 111+, Safari 16.2+, Firefox 127+), використовують другий рядок, а старіші ігнорують його й залишають перший.

Поради

• У полях точок приймаються кольори з прозорістю, наприклад #00000080 або rgb(0 0 0 / 50%), що зручно для накладок на зображення.
• Код записано через background. Використовуйте background-image, якщо інші властивості тла задаєте окремо.
• Стримані градієнти (два близькі відтінки одного кольору) зазвичай виглядають професійніше, ніж райдужні переходи.