Перейти до вмісту
TextArray
100% локально

CSS генератор градієнта

Створюйте CSS-декларації лінійних і радіальних градієнтів із власними кольорами та кутами.

Вихід

CSS генератор градієнта

Генератор градієнтів CSS створює оголошення фонових градієнтів за секунди. Лінійні градієнти течуть в одному напрямку, що ідеально підходить для тонких фонів або привабливих накладень. Радіальні градієнти виходять із центральної точки, що ідеально підходить для ефектів прожекторів або плавних переходів кольорів. Виберіть тип градієнта, установіть кут для лінійних градієнтів (0–360 градусів) і виберіть два кольори — шістнадцяткові коди, RGB, RGBA або іменовані кольори — усі вони працюють. Інструмент генерує повну властивість фону CSS, яку можна вставити у вашу таблицю стилів.

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

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

FAQ

Що таке градієнт CSS?
Градієнт CSS — це плавний перехід кольорів, який відображає безпосередньо браузер. Лінійні градієнти переходять по лінії; радіальні градієнти виходять із центральної точки. Обидва вони легкі, масштабовані та можуть бути анімованими.
Який кут я використовую для різних напрямків?
Для лінійних градієнтів: 0° – зліва направо, 90° – зверху вниз, 180° – справа наліво, 270° – знизу вгору. Працює будь-який кут від 0 до 360 градусів. Радіальні градієнти не використовують кут.
Чи можна використовувати будь-який колірний формат?
так Шістнадцяткові коди (#FF0000), RGB (rgb(255, 0, 0)), RGBA з прозорістю (rgba(255, 0, 0, 0.5)), HSL і іменовані кольори (червоний, синій) працюють у градієнтах CSS.
Чи надсилаються кудись мої дані про колір?
Ні. Цей інструмент повністю працює у вашому браузері. Ваші кольори, ракурси та налаштування ніколи не залишають ваш пристрій.