Як користуватися

Виберіть лінійний, радіальний або конічний градієнт, а потім задайте кут чи положення центру.
Налаштуйте колір, прозорість і позицію кожної точки переходу. Додайте до шести точок або видаліть непотрібні.
Перевірте попередній перегляд, а потім скопіюйте рядок CSS до таблиці стилів.

Як це працює

Результат — стандартне оголошення CSS background. Лінійні градієнти проходять уздовж заданого кута: 0deg — знизу вгору, 90deg — зліва направо, 180deg — згори вниз. Радіальні градієнти розходяться від центральної точки у формі кола або еліпса, що вписується в блок. Конічні градієнти розгортаються навколо центральної точки, починаючи з вибраного кута; вони зручні для створення ефектів на кшталт секторної діаграми та колірного колеса.

Кольори розташовуються відповідно до позицій, тож їх можна вільно перетягувати. Якщо прозорість кольору зменшено, він задається у форматі rgba(), щоб крізь фон було видно вміст. Дві точки переходу в одній позиції створюють різкий край замість плавного переходу — так утворюються смуги.

Усі три функції градієнтів працюють у всіх сучасних браузерах. За замовчуванням кольори градієнта змішуються в колірному просторі sRGB. Перехід між додатковими кольорами (наприклад, синім і жовтим) може виглядати трохи сірим; щоб цього уникнути, додайте посередині яскравіший колір.

Приклади

Ненав’язливий фон для заголовка

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) створює м’який перехід згори вниз, на тлі якого темний текст залишається читабельним.

Смуги з чіткими краями

Використайте чотири точки переходу: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Дві точки на позначці 50% стикаються без плавного переходу, утворюючи дві суцільні половини.

Ефект прожектора

Радіальний градієнт (circle at top left) від rgba(255, 255, 255, 0.6) до rgba(255, 255, 255, 0), накладений на колір, створює м’яке освітлення в куті.

Поширені запитання

У якому напрямку проходить градієнт за кута 0deg?

У CSS кут 0deg спрямований угору, тож градієнт починається знизу й завершується вгорі. 90deg — це зліва направо. У деяких програмах для дизайну кут 0° зазвичай означає напрямок зліва направо.

Чи можна застосувати градієнт до тексту?

Так: застосуйте фон, а потім додайте background-clip: text і color: transparent. Переконайтеся, що текст залишається читабельним на тлі сторінки в усіх частинах градієнта.

Чи потрібні префікси виробників, як-от -webkit-linear-gradient?

Ні. Сучасні браузери підтримують синтаксис без префіксів. Префікси потрібні лише для браузерів, яким багато років.

Конфіденційність

Усе створюється у вашому браузері. Ваші кольори й налаштування не надсилаються та не зберігаються.