Генератор лінійного CSS-градієнта
Створюйте CSS-градієнти візуально: лінійний, радіальний або конічний тип, повзунок кута та до шести колірних зупинок із живим передпереглядом на всю ширину та кодом для копіювання.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор градієнтів із вже обраним лінійним типом. Перетягуйте повзунок кута, щоб обертати перехід, налаштовуйте колірні зупинки — передперегляд на всю ширину та рядок CSS оновлюються при кожному введенні.
linear-gradient() малює кольори вздовж прямої лінії — це найуживаніший градієнт у CSS. 90deg дає напрямок зліва направо, 180deg — згори донизу, а будь-який проміжний кут — діагональ; позиції зупинок у відсотках визначають, де кожна колірна смуга починає змішуватися з наступною.
Коли передперегляд виглядатиме правильно, скопіюйте фоновий рядок у свою таблицю стилів. Якщо вам потрібна відправна точка замість чистого полотна, сторінки пресетів «Захід сонця», «Океан» і «Пастель» відкривають цей самий інструмент із уже завантаженими перевіреними колірними парами.