Генератор CSS-градієнтів
Створіть градієнт візуально й скопіюйте CSS.
- Працює у вашому браузері — ваш текст нікуди не надсилається
- Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно
Як це працює
Градієнти записуються в CSS одним оголошенням, синтаксис якого легко неправильно запам'ятати, особливо конвенцію кута й місце колірних зупинок. Бачити результат під час налаштування швидше, ніж перезавантажувати сторінку для перевірки.
Конвенція кута часто підводить
У CSS 0 градусів вказує вгору, а кут збільшується за годинниковою стрілкою, тож 90 градусів іде зліва направо, а 180 градусів — зверху вниз. Це відрізняється від математичної конвенції та від кількох дизайнерських інструментів, тому градієнт, скопійований звідкись, часто виходить повернутим.
Три типи
Лінійний іде прямою лінією й охоплює майже будь-яке справжнє застосування. Радіальний розходиться від точки, що підходить для сяйва й прожекторів. Конічний обертається навколо центру, і саме з нього будують кругові діаграми та колірні кола.
Градієнт — це зображення, а не колір
Це інша річ, на якій спотикаються. CSS розглядає градієнт як фонове зображення, тож він працює в background і background-image, але не в color, border-color чи будь-чому, що очікує звичайний колір. Для градієнтів тексту потрібен background-clip, що є окремою технікою.
Додавання середнього кольору
Дві зупинки дають чистий перехід. Третя дає змогу провести перехід через інший відтінок, що уникає каламутного сірого, який з'являється, коли два протилежні кольори змішуються напряму.
Генератор CSS-градієнтів — запитання
У який бік іде кут?
0 градусів вказує вгору, а кути збільшуються за годинниковою стрілкою, тож 90 градусів — зліва направо.
Чому мій градієнт не працює на тексті?
Градієнт — це фонове зображення, а не колір. Для градієнтів тексту потрібен background-clip як окремий крок.
Коли використовувати радіальний чи конічний?
Радіальний — для сяйва й прожекторів, конічний — для кругових діаграм і ефектів колірного кола. Лінійний охоплює більшість інших випадків.