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

CSS-градієнт «Захід сонця» — готовий код

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

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

Результат

Ця сторінка відкриває генератор із уже завантаженим переходом заходу сонця: теплий кораловий #ff7e5f перетікає в м'який персиковий #feb47b зліва направо. Прев'ю одразу показує його на всю ширину, а рядок CSS нижче готовий до копіювання як є.

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

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

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

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

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

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

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

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

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

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