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

Кут: нуль дивиться вгору

У математиці нульовий кут дивиться праворуч, а в CSS — угору, і росте за годинниковою стрілкою. Тому 0deg це знизу вгору, 90deg — зліва направо, 180deg — згори вниз.

Саме на цьому найчастіше плутаються: пишуть 0deg, чекаючи горизонтального переходу, і отримують вертикальний.

Замість кута можна писати словами — to right, to bottom left. Це те саме, лише читабельніше.

Пастка з transparent

transparent у CSS означає не «без кольору», а прозорий чорний — rgba(0, 0, 0, 0). Тому перехід red → transparent дає брудний сірий серпанок посередині: колір справді змішується з чорним.

Правильно писати другу зупинку тим самим кольором із нульовою непрозорістю: rgba(255, 0, 0, 0). Тоді перехід чистий.

Градієнт на тексті

Градієнт — це фон, а не колір, тож напряму на текст він не лягає. Роблять так: заливають фон градієнтом, обрізають його по буквах і роблять сам текст прозорим — background-clip: text плюс color: transparent.

Смугастість

На плавному переході між близькими кольорами видно смуги: екран не має стільки відтінків, скільки потребує градієнт. Лікується або ширшим розкидом кольорів, або накладеним поверх ледь помітним шумом.