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

Створюйте CSS-градієнти візуально

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

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

Робота з кольоровими точками

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

Градієнти в реальних інтерфейсах

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