Дані
До цієї точки колір суцільний.
Як влаштований градієнт у CSS
Градієнт — це зображення, а не колір
background-image: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); — саме background-image, не background-color. Тому градієнт можна покласти поверх суцільного кольору тла, і тому він не працює там, де очікують колір: у border-color чи color.
Кут відлічують від напрямку вгору
0deg дивиться вгору, 90deg — праворуч, 180deg — вниз. Кут росте за годинниковою стрілкою. Це найчастіша помилка: у тригонометрії відлік іде проти годинникової стрілки й починається праворуч, у CSS — навпаки.
Точки зупинки — відсотки лінії, а не сторони
Градієнтна лінія проходить через центр елемента під заданим кутом, і 0% — це її початок, 100% — кінець. До першої точки колір суцільний, після останньої — теж. Тому #4f46e5 40%, #06b6d4 60% дає суцільні краї й перехід лише посередині.
Однакові точки дають різку межу
Якщо початок і кінець збігаються, кольори стикаються без переходу. Так роблять двоколірні тла й прапорці — градієнт замість двох блоків.
Що робить repeating-
repeating-linear-gradient() бере ділянку між першою й останньою точкою і повторює її до кінця елемента. Смужки, лінійка, штрихування — усе це один короткий градієнт із повтором.
Радіальний іде від центра
radial-gradient(circle, …) не має кута: перехід іде від центра назовні. circle тримає коло круглим у будь-якому елементі, а стандартний ellipse розтягується разом із ним.
Часті питання про градієнти CSS
Чому мій градієнт не видно?
Три звичні причини: він у background-color замість background-image, в елемента нульова висота, або обидва кольори однакові.
Скільки кольорів можна поставити?
Скільки завгодно — через кому, кожен зі своїм відсотком. Ця сторінка складає градієнт із двох кольорів; третій дописують у той самий рядок за тим самим зразком.
Як зробити градієнт на тексті?
Класти градієнт на тло елемента і обрізати його по літерах: background-clip: text разом із прозорим color. Сам градієнт при цьому лишається звичайним background-image.
Чим linear-gradient відрізняється від conic-gradient?
Лінійний іде вздовж прямої, конічний — по колу навколо центра, як циферблат. Конічним роблять кругові діаграми й ефект «блиску».
Чому перехід виглядає брудним?
Найчастіше — через пару кольорів із протилежних боків кола відтінків: посередині з'являється сірий. Два сусідні відтінки з різною яскравістю дають чистіший перехід.