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

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

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

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

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