Генератор градієнтів CSS
Будуйте лінійні та радіальні градієнти CSS із живим попереднім переглядом і копіюйте готовий код для тла.
Пов'язані інструменти
Як користуватися Градієнт CSS
- 01
Оберіть лінійний або радіальний градієнт.
- 02
Додайте точки кольору і задайте колір і позицію кожної.
- 03
Для лінійного градієнта задайте кут повзунком.
- 04
Скопіюйте CSS і вставте його у свою таблицю стилів.
Що робить цей генератор
Цей генератор градієнтів CSS будує лінійні та радіальні градієнти з точок кольору, якими керуєте ви, із живим попереднім переглядом і готовим до вставлення оголошенням тла. Перетягуйте точки вздовж смуги, задавайте кут або форму, і CSS оновлюється миттєво.
Усе працює у вашому браузері з обраних вами кольорів і налаштувань, тож нічого не завантажується, а результат можна скопіювати і використовувати офлайн.
Лінійні та радіальні градієнти
Лінійний градієнт змішує кольори вздовж прямої, а кут задає її напрямок: 0 градусів угору, 90 градусів праворуч, 180 градусів униз. Радіальний градієнт розходиться від центру назовні у вигляді кола чи еліпса.
Обидва є стандартними значеннями CSS, записаними як linear-gradient() і radial-gradient(), і обидва використовують той самий перелік точок кольору, тож зміна типу зберігає ваші кольори і змінює лише те, як вони розходяться.
Робота з точками кольору
Кожна точка кольору це колір, розміщений у позиції від 0% до 100%. Градієнт плавно змішується між сусідніми точками, тож позиція точки визначає, де її колір найсильніший і як швидко він переходить у наступний.
Додайте стільки точок, скільки потрібно для багатоколірних градієнтів, перетягуйте їх для тонкого налаштування переходу або клацніть по смузі, щоб поставити нову точку там, де хочете. Мінімум для градієнта це дві точки.
Використання CSS у вашому проєкті
Скопіюйте створений код і вставте його як тло будь-якого елемента, наприклад секції, картки чи кнопки. Сучасні браузери підтримують linear-gradient і radial-gradient без префікса виробника, тож значення працює як є.
Оскільки градієнт це просто значення, ви також можете використовувати його всюди, де очікується фонове зображення, накласти його поверх суцільного кольору як запасний варіант або застосувати ті самі точки і в лінійній, і в радіальній версії для узгодженого вигляду.
Поширені запитання
Яка різниця між лінійним і радіальним градієнтом?
Лінійний градієнт змішує кольори вздовж прямої під заданим вами кутом. Радіальний градієнт розходиться від центру назовні по колу. Обидва використовують ті самі точки кольору.
Як працюють точки кольору?
Кожна точка це колір, розміщений у позиції від 0% до 100%. Градієнт плавно змішується між сусідніми точками, тож переміщення точки змінює, де її колір найсильніший.
Як використати створений CSS?
Скопіюйте код і вставте його як властивість background будь-якого елемента, наприклад div чи кнопки. Він працює в кожному сучасному браузері без префікса.
Чи можна додати більше двох кольорів?
Так. Скористайтеся кнопкою «Додати точку», щоб вставити скільки завгодно кольорів, а потім задайте позицію кожного, щоб керувати переходом.
Чи щось завантажується?
Ні. Градієнт створюється повністю у вашому браузері з обраних вами кольорів і налаштувань, і нічого не надсилається на сервер.