Генератор градиентов

Генератор градиентов помогает создавать CSS-градиенты для интерфейсов, фонов, кнопок, графиков и прототипов. Вместо ручного набора каждого linear-gradient или radial-gradient можно подбирать цвета, точки перехода, направление, угол и прозрачность с немедленным просмотром результата. Инструмент полезен, когда градиент должен вписываться в бренд-палитру, не мешать чтению текста или мягко связывать визуальные состояния. Сгенерированный CSS является только техническим результатом; хороший градиент сохраняет контраст, не спорит с содержанием и выглядит устойчиво на разных экранах. Перед использованием стоит проверить его на светлой и темной теме. Также полезно сравнить результат на мобильном экране и в браузерах с разной цветопередачей.

CSS-градиенты — это значения изображений, а не цвета: linear-gradient(), radial-gradient() и conic-gradient() разрешаются в токены <image>, которые браузер растеризует в любом слоте background-image, mask-image или border-image. Линейная форма принимает угол (0deg указывает вверх, 90deg вправо, увеличивается по часовой стрелке) или ключевое слово 'to <side>', вычисляемое по диагонали блока, за которым следует разделённый запятыми список цветовых точек с необязательными позициями в процентах или единицах длины. Радиальная форма принимает форму (circle | ellipse), ключевое слово размера (closest-side, farthest-corner по умолчанию) и якорь 'at <position>'. Коническая форма обходит точки вокруг центра начиная с 'from <angle>' и поддерживается в Chrome 69+, Safari 12.1+ и Firefox 83+.<br /><br />Интерполяция цвета по умолчанию использует sRGB, что перцептуально неравномерно и даёт грязную серую полосу между далёкими оттенками, такими как синий и жёлтый. CSS Color Level 4 ввёл явные цветовые пространства через синтаксис 'in <colorspace>' — 'in oklch', 'in lab', 'in srgb-linear', 'in hsl longer hue' — так что переходы остаются хроматическими по всему спектру. Жёсткие цветовые полосы создаются при совпадении позиций двух точек ('red 50%, blue 50%'), а цветовые подсказки смещают среднюю точку без добавления остановки ('red, 20%, blue').<br /><br />Когда градиент нужно вывести из CSS-конвейера, Canvas предоставляет те же примитивы: CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1), createRadialGradient(x0, y0, r0, x1, y1, r1) и createConicGradient(startAngle, x, y) возвращают объекты CanvasGradient, принимающие addColorStop(offset, color), которые можно присвоить fillStyle перед экспортом через toDataURL('image/png'). SVG предлагает разметочные эквиваленты <linearGradient> и <radialGradient> со значениями spreadMethod 'pad' (по умолчанию), 'reflect' и 'repeat' для мозаичного повторения.

• Линейная форма: linear-gradient(<angle> | to <side-or-corner>, <color-stop>+) — 0deg указывает вверх, увеличивается по часовой стрелке; 'to bottom right' вычисляется по размерам блока, а не как буквально 135deg
• Радиальная форма: radial-gradient([<shape> <size>]? at <position>, <stops>) — ключевые слова размера closest-side, closest-corner, farthest-side, farthest-corner (по умолчанию)
• Коническая форма: conic-gradient(from <angle> at <position>, <stops>) — обходит вокруг центра; Chrome 69+, Safari 12.1+, Firefox 83+
• Интерполяция цвета: CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' переопределяет перцептуально неравномерный sRGB по умолчанию, вызывающий серые полосы между далёкими оттенками
• Жёсткие остановки и подсказки: две точки на одной позиции ('red 50%, blue 50%') дают резкую полосу; одиночный процент ('red, 20%, blue') — цветовая подсказка, смещающая точку смешения 50%
• Canvas API: createLinearGradient(x0,y0,x1,y1), createRadialGradient(x0,y0,r0,x1,y1,r1), createConicGradient(angle,x,y) возвращают CanvasGradient; addColorStop(offset, color), затем присвоение fillStyle
• SVG-эквиваленты: <linearGradient> и <radialGradient> со spreadMethod='pad'|'reflect'|'repeat' управляют мозаичным повторением за пределами границ градиента