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

Линейные градиенты

background: linear-gradient(135deg, #2563eb, #16a34a);

Угол отсчитывается по часовой стрелке сверху: 0deg = вверх, 90deg = вправо, 180deg = вниз, 270deg = влево. Можно также писать именованные направления вручную: to right соответствует 90deg, а to bottom left соответствует 135deg.

Радиальные градиенты

background: radial-gradient(circle, #2563eb, #16a34a);

Цвета растекаются от центра элемента наружу. Радиальные градиенты не используют угол; добавьте ключевые слова позиции или размера вручную (at 30% 40%, ellipse), когда нужен больший контроль.

Цветовые точки

CSS-градиенты принимают больше двух цветов, и у каждой точки может быть своя позиция:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Две точки на одной позиции создают резкий переход: цвет меняется мгновенно вместо плавного смешивания. Полезно для разделённых фонов.

Советы

• Градиент от красного к синему проходит через сероватую середину при интерполяции sRGB по умолчанию. Интерполяция в oklch сохраняет смесь цветной: linear-gradient(in oklch, red, blue), поддерживается современными браузерами.
• transparent не бесцветен: в sRGB это rgba(0,0,0,0), поэтому переход к прозрачному идёт через тёмно-серый. Вместо этого используйте rgba(color, 0).
• Современные браузеры рендерят градиенты на GPU, поэтому они почти ничего не стоят при любом размере. Анимация между градиентами не поддерживается и меняется рывком; вместо неё анимируйте непрозрачность дополнительного слоя.
• Заливка текста: объедините объявление с background-clip: text; color: transparent;, чтобы залить текст градиентом. Для рамок в современных браузерах работает border-image: linear-gradient(...) 1;.