CSS підтримує три типи градієнтів, і кожен з них поширює перехід кольору за різною геометрією — прямою лінією, від центру назовні, чи навколо точки.
linear-gradient: перехід уздовж прямої
linear-gradient(45deg, red, blue) розтягує колір уздовж прямої лінії під заданим кутом. Це найпоширеніший тип — фонові переходи на кнопках, банерах, картках.
radial-gradient: перехід від центру
radial-gradient(circle, yellow, orange) поширює колір концентричними колами чи еліпсами від заданої точки назовні. Цей тип ідеально підходить для імітації світлової плями чи ефекту прожектора на фоні.
conic-gradient: перехід навколо точки
conic-gradient(red, yellow, green, blue, red) обертає колір навколо центральної точки, схоже на рух стрілки годинника. Це єдиний тип градієнта, придатний для побудови кругових діаграм чи індикаторів прогресу без додаткової графіки.
Color stops: точки зупинки кольору
Кожен колір у градієнті можна прив'язати до конкретної позиції у відсотках, наприклад linear-gradient(red 0%, yellow 50%, blue 100%). Це дозволяє керувати не лише кольорами, а й тим, наскільки різко чи плавно один колір переходить в інший.
Навіщо це потрібно
- Швидко підібрати й скопіювати готовий CSS-код градієнта без ручного підбору кутів і кольорів.
- Зрозуміти, який саме тип градієнта підходить для конкретного візуального ефекту.
- Точно налаштувати позиції color stops для потрібного переходу кольорів.
Градієнти, що повторюються
Функції repeating-linear-gradient() і repeating-radial-gradient() автоматично повторюють задану послідовність color stops до заповнення всього елемента, замість того щоб один раз розтягнути перехід на весь простір. Це дозволяє створювати смугасті чи шахові візерунки одним рядком CSS без необхідності вручну прописувати десятки color stops або підключати зображення-текстуру.