Генератор CSS-градієнтів: лінійні, радіальні та конічні

Типи CSS-градієнтів

CSS підтримує три типи градієнтів. linear-gradient() — плавний перехід між кольорами вздовж прямої лінії; можна задати кут або напрям. radial-gradient() — перехід від центру до країв; можна задати форму (circle або ellipse) і положення центру. conic-gradient() — кольори розподілені навколо центральної точки, як на колірному крузі або циферблаті.

Синтаксис та параметри

linear-gradient(45deg, #FF6B6B, #4ECDC4) — лінійний під кутом 45°. linear-gradient(to right, red 0%, blue 50%, green 100%) — з кількома точками зупинки. radial-gradient(circle at center, yellow, red) — радіальний від центру. Градієнти можна накладати один на одного через кому у background.

Сучасні можливості

Інтерполяція в просторі OKLCH дає точніші і красивіші переходи між кольорами, ніж стандартний sRGB. background: linear-gradient(in oklch, blue, red). Градієнти з прозорістю (RGBA або transparent) для накладення на фотографії. Повторювані градієнти: repeating-linear-gradient() для смугастих візерунків.

Продуктивність та підтримка браузерів

Градієнти CSS набагато ефективніші за зображення-текстури, оскільки не потребують мережевого запиту і масштабуються без втрати якості. Всі сучасні браузери підтримують базові градієнти. Conic-gradient підтримується з Chrome 69 та Firefox 83. Для старих браузерів завжди вказуйте fallback background-color.