Градиенты CSS без Stack Overflow — создавайте их визуально и отправляйте

Вы открыли новый файл CSS, ввели background:, и затем посмотрели на экран. Вы знаете, что хотите градиент. Вы знаете, что свойство linear-gradient. Вы не можете вспомнить, в каком порядке идет угол — первым или последним, в какую сторону идут градусы — по часовой или против часовой, или почему цвета, которые вы ввели, выглядят совершенно иначе, чем то, что вы видели нарисованным.

Эта статья решает эту проблему. Мы подробно расскажем, как работают градиенты в CSS — синтаксис, логика угла и паттерны, которые вы будете использовать на практике — и предоставим визуальный генератор, чтобы вы перестали угадывать и начали внедрять решения.

Как работает linear-gradient на самом деле

Основной синтаксис следующий:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Это direction — то, что вызывает у людей трудности. У вас есть два варианта: ключевое слово или угол в градусах.

Ключевые слова: to top, to bottom (по умолчанию), to left, to right, и диагонали: to top right, to bottom left(0–6 или 1–7) — воскресенье может быть

Градусы: 0deg указывает вверх (так же, как to top). Угол увеличивается по часовой стрелке, поэтому 90deg указывает вправо, 180deg указывает вниз, 270deg указывает влево.

Вот часть, которую стоит запомнить: 0deg = вверх, по часовой стрелке от этого. Всё остальное следует из этого.

Шесть паттернов, которые вы будете использовать в течение этой недели

1. От верха до низа (по умолчанию)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Плавное переход к прозрачности

При наложении текста на изображение? Вам нужно, чтобы низ был темным, а верх — прозрачным. Используйте transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Одно предостережение: избегайте transparent в Safari при переходе от цвета к цвету — он проходит через чёрный. Используйте rgba(r, g, b, 0) с одинаковыми значениями RGB вместо этого.

3. Наклонный фон-элемент

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg приблизительно от нижнего левого к верхнему правому — классический угол обложки журнала. Многоуровневые градиенты такого типа определяются процентными значениями после каждого цвета. Без процентного значения CSS равномерно распределяет цвета.

4. Незаметное затемнение карточек

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Карточки, использующие чистый белый цвет, выглядят плоскими на белом фоне. Очень тонкий градиент от белого до очень светлого серого придаёт им глубину без впечатления, что они были специально спроектированы. Это тот градиент, который никто не замечает, и именно это и есть цель.

5. Накладной эффект кнопки

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Градиенты слева направо (90deg) кажутся динамичными. Сочетайте с состоянием наведения, при котором сдвигается позиция фона (используя background-size: 200% и переход background-position) для плавного эффекта сдвига на кнопках.

6. Жёсткий цветовой переход (без смешивания)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Два цветовых перехода на одной позиции создают резкую линию без смешивания. Полезно для раздельных экранов, индикаторов прогресса и полосатых паттернов — всё это без дополнительных элементов или изображений.

Круговые градиенты: другой вариант

radial-gradient распространяется от центральной точки, а не движется в определённом направлении:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

Первый аргумент — форма (circle или ellipse) — за которым следует позиция. at center — по умолчанию. Перемещайте фокус с помощью at top left, at 30% 60%и т.д. Круговые градиенты отлично подходят для эффектов фокуса, светящихся кнопок и круговых фонов страниц.

Синтаксис, который никто не запоминает (и как его никогда не пропустить)

Три вещи, которые вызывают у разработчиков трудности, в порядке частоты:

• Угол до цветов — направление всегда идёт первым, до любого цветового перехода.
• По часовой стрелке в градусах — 90deg — вправо, а не вверх. 0deg — вверх.
• Полоса от прозрачного к цвету — браузеры смешивают через чёрный, если вы не устанавливаете одинаковые значения RGBA на обоих концах.

Если вы хотите полностью избежать проб и ошибок, то Генератор CSS градиента на iotools.cloud позволяет вам выбирать цвета визуально, перетаскивать точки, переворачивать угол и копировать готовый CSS за один клик. Больше не нужно угадывать, как выглядит 143deg .

Поддержка браузера

linear-gradient и radial-gradient поддерживаются на всех современных браузерах — Chrome, Firefox, Safari и Edge поддерживают их без префиксов. Вам не нужно использовать -webkit- префиксы для стандартного синтаксиса градиентов в 2026 году.

Единственное исключение — устаревший синтаксис -webkit-linear-gradient используемый в Safari 5.1 и Chrome 10–25. Если вы не поддерживаете браузеры из 2012 года, вы можете его игнорировать.

conic-gradient имеет сильную поддержку в современных браузерах, но не имеет поддержки для Internet Explorer и устаревших версий — используйте его, когда ваша цель — поддержка только современных браузеров.

Пропустите синтаксис — создавайте визуально

Синтаксис градиентов в CSS не сложен, но тяжело настраивать вручную. Инструмент Генератор CSS градиента на iotools.cloud даёт вам живое предварительное отображение, возможность перетаскивания точек цвета, контроль ввода для линейных или круговых градиентов и возможность копирования за один клик. Создавайте градиент визуально, вставляйте результат и отправляйте.

Вам также может понравиться