Генератор градієнта CSS
Налаштуйте градієнт візуально й скопіюйте CSS, що працює в усіх сучасних браузерах.
Запечатано на цьому пристрої
Працює у вашому браузері. Нічого не завантажується на сервер.
Запечатано
Попередній перегляд
Кольорові точки
Перетягуйте точки або виберіть одну й користуйтеся клавішами зі стрілками. Клацніть смугу, щоб додати точку.
Налаштування
OKLCH і OKLab уникають тьмяної сірої зони посередині деяких градієнтів. Для старіших браузерів додається стандартна версія.
Код CSS
Як це працює
-
Оберіть тип
Оберіть лінійний, радіальний чи конічний градієнт або почніть із шаблону й задайте кут чи центр.
-
Змініть кольори
Перетягуйте кольорові точки вздовж смуги, клацайте по смузі, щоб додати нові, і змінюйте колір та позицію кожної точки.
-
Скопіюйте CSS
Скопіюйте згенерований код і вставте його у свою таблицю стилів як фон.
Поширені запитання
Чим відрізняються лінійний, радіальний і конічний градієнти?
Лінійний градієнт змінює колір уздовж прямої під вибраним кутом. Радіальний розходиться від центральної точки колом або еліпсом. Конічний обертається навколо центральної точки, як стрілки годинника, що зручно для колірних кіл і кругових діаграм.
Чи працює згенерований CSS у всіх браузерах?
Лінійні, радіальні й конічні градієнти працюють в усіх сучасних браузерах. Якщо ви оберете змішування OKLCH чи OKLab, код спочатку міститиме стандартний рядок, тож старіші браузери все одно покажуть градієнт.
Чому мій градієнт сірий посередині?
Змішування двох дуже різних кольорів у стандартному просторі sRGB часто проходить через брудно-сірий. Перемкніть змішування на OKLCH або OKLab: кольори змішуються так, як їх сприймає око, тож середина залишається яскравою.
Чи можна використовувати прозорі кольори?
Так. Введіть колір із прозорістю, наприклад rgb(52 66 217 / 0.4) або #3442d966, у поле кольору точки. Це чудово підходить для накладань поверх зображень.
Скільки кольорових точок можна додати?
Скільки потрібно. Кожну точку можна переміщувати мишею, дотиком або клавішами зі стрілками й видаляти, доки залишається щонайменше дві точки.