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

Виберіть колір і кут, щоб створити код CSS градієнта з передпереглядом

ОновленняДодано генератор CSS-градієнтів, генерація коду за вибором кольору та кутаПереглянути оновлення

Особливості

Одночасне оновлення передпрегляду та коду

Зовнішній вигляд та CSS змінюються одночасно при зміні кольору чи кута

Підтримка лінійних, радіальних і конічних градієнтів

Детально вказуйте кут, форму та центральну позицію для кожного типу

Налаштування до 10 кольорів за допомогою перетягування

Налаштовуйте позицію кольорів перетягуванням на панелі, прозорість - повзунком

8 зразків і випадкова генерація

Почніть із популярної або випадкової палітри та внесіть дрібні коригування

Як використовувати

Виберіть тип

Виберіть тип градієнта: лінійний, радіальний або конічний

Виберіть колір

Виберіть колір за кодом або зразком, додавайте кольори кнопкою «Додати колір» та налаштовуйте позицію і прозорість

Налаштуйте напрямок

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

Скопіюйте код

Натисніть кнопку «Копіювати» і вставте односрядковий CSS у свій стиль

Варіанти використання

Створення фону героя

Виберіть фоновий колір для заголовка сайту або кнопок без написання коду

Вибір кольорів для заголовків блогу

Виберіть близьку палітру зі зразків для оформлення фону заголовків статей

Накладення напівпрозорого шару на фото

Створіть напівпрозорий шар, знизивши прозорість кольору над фотографією

Налаштування багатокольорових градієнтів

Перетягуванням поступово переміщуйте позицію кордонів трьох і більше кольорів

Основні поняття

Різниця між linear, radial та conic

CSS градієнти мають три функції з різними способами зміни кольору, всі вони записуються в властивість background.

linear-gradient：linear-gradient - лінійний градієнт, де колір змінюється вздовж прямої за вказаним кутом.
radial-gradient：radial-gradient - радіальний градієнт, де колір розпростирається від центру назовні у формі кола або еліпса.
conic-gradient：conic-gradient - конічний градієнт, де колір змінюється по колу навколо центральної точки за годинниковою стрілкою.

Відповідність кута та ключових слів напрямку

Кут у linear-gradient: 0deg спрямований знизу вгору, кут збільшується за годинниковою стрілкою. Кут можна записати ключовими словами, як «to right»: 90deg відповідає «to right», 180deg - «to bottom».

Як записувати точки зупинки кольорів і прозорість

Точка зупинки кольору (color stop) - це позиція в градієнті, де встановлюється колір. 0% - це початкова точка, 100% - кінцева. Наприклад, «#3B82F6 0%, #8B5CF6 100%» означає перехід від синього на початку до фіолетового в кінці.

Формат #RRGGBB：Формат #RRGGBB - це спосіб запису кольору за допомогою значень червоного, зеленого та синього в шістнадцятковій системі по 2 цифри для кожного. #FF0000 - це непрозорий червоний колір.
Формат rgba：Формат rgba - це спосіб запису кольору за допомогою значень червоного, зеленого та синього (0–255) і прозорості (0–1). Прозорість 0.5 означає напівпрозорий колір.