⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Генератор лінійного CSS-градієнта

Візуальний конструктор CSS-градієнтів: лінійний, радіальний чи конічний тип, повзунок кута й до шести колірних точок із живим прев'ю на всю ширину.

90°
Опрацювання... 0%

Результат

Ця сторінка відкриває генератор градієнтів із уже вибраним лінійним типом. Тягніть повзунок кута, щоб повернути перехід, налаштуйте колірні точки — і прев'ю на всю ширину разом із рядком CSS оновляться при кожному введенні.

linear-gradient() малює кольори вздовж прямої лінії — це найуживаніший градієнт у CSS. 90deg іде зліва направо, 180deg — згори вниз, а будь-який проміжний кут дає діагональ; позиції точок у відсотках визначають, де кожна смуга кольору починає перетікати в наступну.

Коли прев'ю виглядає як треба, скопіюйте рядок background у ваш стиль. Якщо хочеться відправної точки замість чистого аркуша — пресет-сторінки захід сонця, океан і пастель відкривають цей самий інструмент із перевіреними парами кольорів.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Вибір типу градієнта (лінійний, радіальний, конічний) із повзунком кута для лінійного та конічного режимів.
  • Список колірних точок: дві на старті, додавання й видалення до шести, кожна з власною піпеткою кольору та позицією у відсотках.
  • Готовий до копіювання рядок background CSS плюс пресет-сторінки з градієнтами захід сонця, океан і пастель.

Наші переваги

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

Сценарії використання

  • • Складіть фон hero-секції, тягнучи кут і колірні точки, замість ручного редагування linear-gradient() із перезавантаженням.
  • • Порівняйте ті самі колірні точки як лінійний, радіальний і конічний градієнти одним перемиканням — точки переносяться між типами.
  • • Візьміть перевірену комбінацію з пресет-сторінки заходу сонця, океану чи пастелі та підлаштуйте її під кольори бренду.