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

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

Генератор CSS-градієнтів — це безкоштовний інструмент у браузері для вебдизайнерів і фронтенд-розробників, які хочуть створювати градієнти візуально, а не писати синтаксис вручну. Виберіть лінійний, радіальний або конічний — з необов'язковим повторюваним варіантом — потім редагуйте переходи кольору на перетягуваній смузі попереднього перегляду або в рядках по кожному переходу з полями HEX-кольору й позиції. Радіальні градієнти пропонують форму кола/еліпса, ключове слово розміру (closest-side, closest-corner, farthest-side, farthest-corner) і центр at X% Y%, а конічні приймають початковий кут і центр. Ви можете накласти кілька шарів градієнта в одне тло через кому, згенерувати випадковий градієнт, застосувати готові палітри, повернути відтінок кожного переходу і скопіювати готове до вставлення правило background.

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

1. Виберіть тип градієнта — лінійний, радіальний або конічний — і ввімкніть «Повтор» у параметрах для повторюваного візерунка.
2. Перетягуйте переходи вздовж смуги попереднього перегляду, щоб змінювати їхнє положення, клацніть порожнє місце смуги, щоб додати перехід, або двічі клацніть перехід, щоб видалити його.
3. Точно налаштовуйте кожен перехід полями HEX-кольору й позиції або використовуйте піпетку (де підтримується), щоб узяти колір з екрана.
4. Для радіальних градієнтів задайте форму (коло чи еліпс), ключове слово розміру та центр X/Y; для конічних — початковий кут і центр.
5. Додавайте шари, щоб накласти градієнти в одне тло, спробуйте «Випадково», застосуйте палітру або поверніть усі відтінки одразу.
6. Скопіюйте згенероване правило CSS background і вставте його в таблицю стилів.

Приклади

Лінійний, 90deg, #4f86f7 на 0% і #9333ea на 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Радіальний, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Шар 1 лінійний 90deg; Шар 2 радіальний circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Поширені запитання

Які типи градієнтів і параметри підтримуються?

Лінійні, радіальні й конічні градієнти, кожен з необов'язковим повторюваним варіантом. Радіальний додає форму кола/еліпса, ключове слово розміру (closest-side, closest-corner, farthest-side, farthest-corner) і центр at X% Y%; конічний додає початковий кут і центр. Також можна накласти кілька шарів в одне тло.

Як працює перетягувана смуга переходів?

Перетягніть будь-який перехід вздовж смуги, щоб змінити його положення, клацніть порожню частину смуги, щоб вставити новий перехід з інтерпольованим кольором, і двічі клацніть перехід, щоб видалити його (зберігається щонайменше два). Кожен перехід також має поля HEX-кольору й позиції під смугою.

Чи можу я взяти колір з екрана?

Так, у браузерах із підтримкою EyeDropper API. Коли вона доступна, поруч із кожним переходом з'являється кнопка піпетки; натисніть її та виберіть будь-який піксель на екрані. Ви завжди можете ввести значення HEX або скористатися вбудованим зразком кольору.

Що роблять «Випадково», палітри та поворот відтінку?

«Випадково» замінює активний шар новим випадковим градієнтом, палітри міняють переходи активного шару на дібраний набір кольорів, а «Повернути відтінок» зсуває відтінок кожного переходу в усіх шарах одразу. Вони змінюють градієнт лише після натискання.

Чи завантажуються мої кольори або CSS кудись?

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