Генератор градиента CSS: линейный, радиальный, конический (и угловая ловушка)

Я проиграл большую часть дня градиенту один раз. Не сложный - героический фон на маркетинговой странице WP Adminify, ярко-синий цвет, переходящий в оранжевый, диагональный. Я написал linear-gradient(45deg, #4466EE, #E99537) И пошло не так. Так что я пытался -45deg, йо- Тоже неправильно. к тому же 135deg, что было правильно, и я пошел дальше, не понимая, почему, что является наихудшим возможным результатом, потому что это гарантирует, что вы снова поймете это неправильно.

Причина в том, что углы градиента CSS — это не углы, которые вы изучили на уроке математики. 0deg очки ввысь, а угол увеличивается по часовой стрелке. В тригонометрии - и в SVG, и в холсте - 0 точек вправо и углы увеличиваются против часовой стрелки. два разных соглашения, одно одинаковое на вид deg единицы, и нет сообщения об ошибке, когда вы выбираете неправильный. это написано прямо в Модуль CSS Immod 3 уровень, а я просто никогда не читал.

Это относится к визуальному генератору в одном анекдоте. выше градиент генератора на Toolz.dev вы получаете предварительный просмотр в реальном времени, перетаскиваемые цветовые остановки и копируемый CSS для линейных, радиальных и конических градиентов - поэтому вопрос угла отвечает сам за себя, а не стоит вам дня.

TL;DR: В CSS, 0deg указывает на верх и углы бегут по часовой стрелке, так to right равный 90deg а верхняя левая → нижняя правая диагональ 135deg, не 45deg, йо- обычай градиент генератора видеть это, а не гадать, и палитра Чтобы выбрать остановки, которые не идут посередине. градиенты <image> ценности - везде, где можно воспользоваться url(), вы можете использовать градиент. Все клиенты, без регистрации.

Что такое градиент CSS, технически?

Градиент — это не цвет. это идол, йо- Этот единственный факт объясняет большую часть синтаксиса.

на CSS-изображения 3 уровень, linear-gradient(), radial-gradient(), а их повторяющиеся варианты дают значение типа <image>, йо- это означает, что везде, где спецификация принимает url('photo.jpg'), он также принимает градиент: background-image, border-image, list-style-image, mask-image, content, йо- это также означает, что градиенты имеют Нет внутренних размеров- они растягиваются, чтобы заполнить коробку, в которую вы их положили, поэтому тот же градиент выглядит по-разному на кнопке 200px и герое 1400px.

conic-gradient() пришла позже и живет в CSS-изображения 4 уровень, наряду с синтаксисом интерполяции-цвета и пробелом я перейду ниже.

Какая разница между линейным, радиальным и коническим?

Линейные градиенты - и соглашение об углах

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

Запомни это на память, и ты никогда не повторишь мой день:

Есть еще одна тонкость с ключевыми словами Corner. to bottom right дурак не просто означать 135deg, йо- Спецификация определяет его как угол, выбранный так, чтобы линия градиента была перпендикулярна другой диагональ - что означает на неквадратной коробке, to bottom right а 135deg давать заметно разные результаты. На площади они идентичны. Это то, что вы замечаете в 23:00, когда карта выглядит правильно в дизайне и ошибается в узкой колонке.

Радиальные градиенты - там, где живут ключевые слова размера

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

Четыре ключевые слова размера решают, где конечный Цвет остановки приземляется, измеряется от центра:

• closest-side- ближайший край коробки
• farthest-side- самый дальний край
• closest-corner- ближайший угол
• farthest-corner- самый дальний угол (это по умолчанию))

Измените ключевое слово, и градиент будет выглядеть как другой градиент. Это самая распространенная причина радиального градиента «не будет делать то, что я хочу», и гораздо быстрее просмотреть четыре варианта в градиент генератора чем рассуждать об этом.

Конические градиенты - пироги, колеса, кольца

Коническая метла в оба центр, начиная с 12 o и # 39;часы и движение по часовой стрелке (то же соглашение, что и линейное - по крайней мере, it&# 39;s согласованное).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

что mask Линия — это вся трюк, стоящий за каждым индикатором прогресса пончиков, который вы когда-либо видели, и это около шести строк CSS вместо библиотеки SVG.

Как мне контролировать, где попадают цвета?

Цвет остановки

Дайте остановку позиции, и вы будете контролировать переход. потопить двоих позиции, и вы получаете жесткое преимущество - никакой интерполяции вообще.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

Подсказки интерполяции (середина, которую вы не знали, что можете переместиться)

неполный процент между Два цвета перемещают среднюю точку 50/50. Это самый недоиспользуемый фрагмент градиентного синтаксиса, который я знаю:

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

Используйте его для скримов изображений. равняется to top, rgba(0,0,0,.8), transparent Наложение обычно съедает слишком много фото; бросьте 35% Намек в себе, и тьма скатывается в сторону дна, где находится подпись.

Повторяя градиенты для шаблонов

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

Одна строка, нет файла изображения, бесконечно масштабируемый Просто don't применить его к полностраничному элементу и затем задаться вопросом, почему прокрутка заикается на Android среднего диапазона - перекрашивание большого повторяющегося градиента во время прокрутки - это реальная работа для композитора.

Почему мой градиент выглядит грязным посередине?

Две отдельные причины, и люди постоянно их объединяют.

Причина 1: интерполяция sRGB

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

CSS Images 4 уровень исправляет это, позволяя вам назвать пространство интерполяции:

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch Сохраняет воспринимаемую легкость и хромату постоянно на всей смеси. Поддержка браузера для in <colorspace> Синтаксис хорош в текущих Chrome, Safari и Firefox, но если вам нужно поддерживать старые браузеры, то запасной вариант — старое исправление вручную: добавьте промежуточную остановку и управляйте смесью самостоятельно.

Причина 2: выцветание transparent- и моя вторая ошибка

transparent определяется как rgba(0, 0, 0, 0), йо- прозрачный негр, йо- Если браузеры наивно интерполированы, linear-gradient(#E99537, transparent) Сквозь постепенно темный, серый оранжевый на пути к нулю.

Современные браузеры don't делают это - спецификация требует интерполяции предварительно умноженный Альфа-пространство, которое полностью обходит проблему. Но старого WebKit не было, и я отправил героя на клиентский сайт, который выглядел чистым на моей машине и выглядел как грязный пятно на их двухлетнем iPad. Пуленепробиваемая версия, которая вам ничего не стоит и работает повсюду:

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

Я до сих пор пишу это из рубцовой ткани.

На что мне обратить внимание с доступностью?

Контраст должен держать по всему градиенту

WCAG 2.1 SC 1.4.3 Требуется 4,5:1 для обычного текста и 3:1 для большого текста (18pt или 14pt жирным шрифтом). Градиент означает, что ваш фоновый цвет отличается на каждом пикселе, поэтому требование должно быть выполнено в наихудший точка - самый светлый патч, если ваш текст белый, самый темный, если он 's черный.

Надежный шаблон — перестать пытаться сделать сам градиент читабельным, а сверху надеть скрипт:

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

Теперь текст находится на известном темном диапазоне независимо от того, что делает градиент под ним. Проверьте концы с помощью палитра перед отправкой - полный контрастный проход, включая цвет бренда, который я отправил в соотношении 2,38:1, находится в Руководство по выборке цвета, йо-

Градиентный текст — это люк

Это тот, который на самом деле сжег меня на целевой странице производства:

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

если background-clip: text применяется 't по любой причине - старый браузер, расширение, блокирующее фоновые изображения, таблица стилей печати - you'осталось с color: transparent и невидимая заголовок, йо- Текст все еще находится в DOM, поэтому скрин-ридер считывает его счастливо, и вы понятия не имеете, что что-то не так. обычай @supports Чтобы получить его:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

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

Анимированные градиенты нуждаются в люке для эваку

Вы не можете градиент перехода цвета- браузер выиграл 't интерполировать между двумя <image> ценности. то, что люди вместо этого оживляют, background-position По негабаритному градиенту:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

Этот последний блок не является необязательным. Непрерывное фоновое движение является задокументированным триггером вестибулярных расстройств и почета prefers-reduced-motion три строки.

(Современная альтернатива - регистрация пользовательской недвижимости с @property Так что его тип известен и поэтому анимируемый, затем используя его внутри градиента. Он чистый, поддерживается в текущих браузерах, и все еще стоит иметь Guard с уменьшенным движением.)

Как построить один с помощью инструмента?

1. откройте градиент генератора, йо-
2. Выберите тип - линейный, радиальный или конический.
3. Щелкните стоп, чтобы изменить цвет, перетащите его, чтобы переместить его положение. Щелкните бар, чтобы добавить остановку, перетащите ее, чтобы удалить ее.
4. Для линейного перетащите угол. Смотрите номер: здесь 0deg-Is-Up Convention перестает быть абстрактным.
5. Для Radial зациклите ключевые слова в четыре размера и посмотрите, что изменится. Это самый быстрый способ построить для них интуицию.
6. Скопируйте CSS.

Обычно правильный ответ — два цвета. Каждый градиент, о котором я сожалел, имел пять остановок.

Градиенты, которые стоит воровать

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

Подайте цвета вашей фирмы в палитра сначала возьмите значения HSL, затем измените легкость, а не оттенок - это's как вы получаете остановки, которые чисто смешиваются, а не сражаются.

Часто задаваемые вопросы

Почему мой градиент CSS идет в неправильном направлении?

Поскольку углы градиента CSS начинаются с верх и увеличить по часовой стрелке, в отличие от тригонометрии, SVG или холста, которые начинаются справа и идут против часовой стрелки. to right есть 90deg, to bottom есть 180deg, а диагональ сверху слева вниз 135deg, не 45deg, йо-

мне все еще нужно -webkit- Префиксы для градиентов CSS?

не для linear-gradient(), radial-gradient(), или conic-gradient()- все три работают без префикса в каждом текущем браузере. Единственное место, которое префикс все еще зарабатывает -webkit-background-clip: text Для градиентного текста, где он нужен более старому Safari. Отправьте туда обе декларации.

Могу ли я анимировать градиент CSS?

Не само значение градиента - градиент есть <image>, и браузер не интерполирует между двумя изображениями. Стандартный обходной путь состоит в том, чтобы сделать градиент намного больше, чем его поле (background-size: 600% 600%) и живите background-position, йо- Современный подход регистрирует собственное свойство с @property Таким образом, он имеет известный тип и становится анимационным внутри градиента. В любом случае охранять его с prefers-reduced-motion, йо-

Почему мой градиент выглядит серым или грязным посередине?

Почти всегда интерполяция sRGB между цветами, которые находятся напротив друг друга на колесе - от синего до желтого является классическим. Их средняя точка sRGB действительно близка к серому. Исправьте это, назвав лучшее интерполяционное пространство, linear-gradient(in oklch, to right, blue, yellow), или добавив промежуточную остановку, чтобы управлять смесью самостоятельно.

Почему увядает transparent Выглядеть грязным?

transparent определяется как rgba(0, 0, 0, 0)- прозрачный негр, йо- Текущие браузеры интерполируются в предварительно умноженном альфа-пространстве, так что это больше не проблема, но старый WebKit перетащил градиент через серый на выходе. Если вы поддерживаете старые устройства, напишите нулевые версии собственного цвета: rgba(233, 149, 55, 0) вместо transparent, йо-

Как сделать градиентную границу?

Два варианта. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; одна строчка, но молча убивает border-radius, йо- Если вам нужны закругленные углы, нанесите два фона с разными background-clip а background-origin значения или поместите градиент на псевдоэлемент за рамкой.

Вредны ли градиенты CSS для производительности?

Статический градиент дешев - дешевле, чем загрузка эквивалентного изображения, и он масштабируется до любого размера бесплатно. Затраты появляются, когда должен быть большой градиент перекрашенный Многократно: полностраничный повторяющийся градиент во время прокрутки или несколько многоуровневых градиентов под backdrop-filter, йо- Если страница кажется залипчивой на мобильном телефоне, это первое, что я проверю в DevTools' Paint Profiler.

Сколько цветов остановки должен быть у градиента?

Два, большую часть времени. Три, когда вы хотите управлять смесью через определенный оттенок. Кроме того, вы обычно тянетесь к чему-то, что лучше сетчатый градиент (несколько расположенных радиальных радиальных сеток), и каждая дополнительная остановка — еще одна вещь, которая может выглядеть неправильно на чужом дисплее.

Как сделать градиентный фон в CSS?

Установить background (или background-image) свойство функции градиента. background: linear-gradient(to right, #4466EE, #E99537); Краска слева направо, без файла изображения вообще. radial-gradient() а conic-gradient() Следуйте той же схеме для круглых и стрелковых смесей. Поскольку результат генерируется, а не загружается, он остается четким в любом размере.

Как создать градиентный текст в CSS?

Положите градиент на background, затем устанавливаем background-clip: text (с -webkit- префикс для сафари) и color: transparent, поэтому буквы заполняются градиентом, а не сплошным цветом. Сохраняйте реальный текст в разметке, а не печатайте его в изображении, чтобы он был выбран и читаем для чтения экрана.

завершение

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

Постройте их там, где вы можете их увидеть. выше градиент генератора Бесплатно, работает полностью в вашем браузере и копирует чистый CSS. Соедините его с палитра Для остановок, которые держат их контраст, и CSS-минификатор Когда вы будете готовы его встроить. Остальная часть передней полки находится в Руководство по инструментам повышения производительности разработчика, йо-