Что принимает linear-gradient()
background: linear-gradient(135deg, #F5A63D 0%, #A8340F 100%);
Угол, затем список цветовых точек. Каждая точка — цвет и позиция на линии; браузер смешивает соседние. Всё, что выдаёт инструмент выше, — ровно эта строка.
| Угол | Направление |
| --- | --- |
| 0deg | снизу вверх |
| 90deg | слева направо |
| 180deg | сверху вниз |
| 135deg | из левого верхнего в правый нижний |
Точки — это позиции, а не только цвета
Две точки на одной позиции дают резкую границу. Точки не по порядку не вызывают ошибку, а прижимаются к предыдущей — поэтому градиент после правки может молча выглядеть не так; инструмент сортирует их за вас.
Где применяют
Кнопки и карточки, фон страницы, затемнение поверх фото, чтобы текст читался
(linear-gradient(to top, rgb(0 0 0 / .6), transparent)), скелетоны загрузки.
Те же цвета кругом или разворотом? Радиальный
и общий генератор градиентов используют тот же
формат ссылки — точки переносятся.
Считается на вашем устройстве
Превью — это CSS в вашем браузере. Ничего не загружается; ссылка в адресной строке — весь градиент целиком.
Вопросы
Куда направлен 0deg?+
Вверх. Углы в CSS начинаются сверху и идут по часовой стрелке: 90deg — слева направо, 180deg — сверху вниз, 270deg — справа налево. 135deg по умолчанию идёт из левого верхнего угла в правый нижний — диагональ, которую используют чаще всего.
Можно словами вместо градусов?+
Да — `to right`, `to bottom left` и подобные допустимы и значат то же, что соответствующий угол. Инструмент выдаёт градусы, потому что они однозначны и дают любое промежуточное значение; `to bottom right` равно 135deg только на квадрате, поскольку ключевое слово целится в угол, а градусы — нет.
Почему середина двухцветного градиента серая?+
Интерполяция в sRGB между далёкими оттенками проходит через серый — классика: синий и жёлтый. Либо добавьте среднюю точку нужного цвета, либо интерполируйте в перцептивном пространстве: `linear-gradient(in oklab, …)` поддерживают современные браузеры.
Как сделать резкую границу вместо перехода?+
Поставьте две точки на одну позицию. `red 50%, blue 50%` переключается с красного на синий без перехода — так делают полосы, разделённые фоны и прогресс-бары на чистом CSS.
Работает как фон у любого элемента?+
Да. Градиент — это изображение, и он идёт туда же, куда `background-image`: body, кнопка, карточка, псевдоэлемент. Масштабируется под блок без файла и без размытия.