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

Писати linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) вручну й перезавантажувати сторінку, щоб побачити результат, — повільний цикл. Цей генератор його замикає: оберіть лінійний, радіальний чи конічний тип, тягніть повзунок кута, задайте кожну колірну точку рідною піпеткою та позицією у відсотках — і прев'ю на всю ширину перемальовується при кожному введенні, а готовий рядок background завжди чекає на копіювання.

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

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

Усе працює локально у вашому браузері: без завантажень, без акаунта, без звернень до сервера, а після відкриття сторінки генератор працює й офлайн.