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

Пастельний CSS-градієнт — готовий код

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

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

Результат

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

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

Скопіюйте рядок як є або пом'якшіть ще: пересуньте трояндову точку на 80%, щоб рожевий домінував, або перемкніться на радіальний тип для ніжного сяйва в центрі. Інструмент оновлює CSS при кожному введенні.

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

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

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

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

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

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

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

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