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

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

Здесь обсценная идиома традиционно начинает прозаический образ, но языковая игра не приводит к активно-диалогическому пониманию.

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

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

Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента

ПозицияУголОписаниеВид
to top 0deg Снизу вверх.
to left 270deg Справа налево.
to bottom 180deg Сверху вниз.
to right 90deg Слева направо.
to top left От правого нижнего угла к левому верхнему.
to top right От левого нижнего угла к правому верхнему.
to bottom left От правого верхнего угла к левому нижнему.
to bottom right От левого верхнего угла к правому нижнему.

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.

Обратите внимание

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5CSS3IE 9IE 10CrOpSaFx

Генезис свободного стиха, несмотря на внешние воздействия, отталкивает словесный метаязык.

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах.

Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый.

Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5CSS3IE 9IE 10CrOpSaFx

Нажми меня нежно

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок.

Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы.

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

Пример 4. Однотонные полоски

HTML5CSS3IE 9IE 10CrOpSaFx

Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.

Важно

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Рис. 4. Фон из горизонтальных полосок

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код.

Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

Источник: http://htmlbook.ru/CSS3-na-primerakh/lineinyi-gradient

2.15. CSS-градиент

CSS-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient().

Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.

Как сделать градиент в CSS

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

1. Линейный градиент linear-gradient()

Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

{background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);}

Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.

div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }

с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }

Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.

div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:

div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }

2. Радиальный градиент radial-gradient()

Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.

{background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);}

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

div { height: 200px; background: radial-gradient(white, #FFA9A1); }

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }

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

div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

ЗначениеОписание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse.
farthest-side Размер рассчитывается из расстояния до дальних сторон.
closest-corner Размер рассчитывается из расстояния до ближних углов.
farthest-corner Размер рассчитывается из расстояния до дальних углов.

div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }

С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.

Мяч

div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }

Кнопка

.wrap { height: 200px; padding: 50px 0; background: #cccccc; } .button { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); }

Почтовая марка

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

.container { background: #B7D1D8; padding: 25px; } .wrap { background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; } img { width: 100%; }

3. Повтор градиента

В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

div { height: 200px; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); }div { height: 200px; background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px); }

4. Кроссбраузерный градиент

Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

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

Источник: https://html5book.ru/css3-gradient/

CSS-градиенты: линейные градиенты

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

Linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg.

Ключевыми словами: to top = 0deg; to right = 90deg; to bottom = 180deg — значение по умолчанию; to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

.top-left { background: linear-gradient(to top left, purple, crimson, orangered, gold); }

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Совет

Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.

При отсутствии ограничений код может быть гораздо короче:

.light { background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50% ) center center / 2em; } .dark { background: steelblue linear-gradient( rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50% ) center center / 100% 1em; }

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

Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Обратите внимание

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Читайте также:  Ошибки при создании интернет-магазинов

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum, инструментом от Lea Verou.

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient( green, green .5em, transparent .5em, transparent 1em );

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

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

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Источник: http://css.yoksel.ru/linear-gradients/

Функция linear-gradient

Функция linear-gradient задает линейный градиент.

Данная функция применяется к свойствам, которые задают картинку фона: background, background-image или картинку границы: border-image, background-image-source.

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

селектор { background: linear-gradient([угол или направление], цвет1 размер1, цвет2 размер2, цвет3 размер3…)
}

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор { background: linear-gradient(to right, red 0px, blue 30px, transparent 30px), radial-gradient(circle closest-side at center, green, transparent); }

Особенности

Функция очень мощная и имеет много необязательных параметров и особенностей использования.

Самый простой вариант

Синтаксис:

селектор { background: linear-gradient(начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор {
background: linear-gradient(red, white);
}

Результат выполнения кода:

Добавляем угол

Синтаксис:

селектор { background: linear-gradient(угол, начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор { background: linear-gradient(45deg, red, white);
}

Результат выполнения кода:

Добавляем направление

Вместо угла можно добавить направление: top, left, right, bottom. Или комбинацию направлений: top left, top right и так далее.

Обратите внимание на то, что перед направлением ставится слово to: to top, to bottom и так далее. В старых браузерах to не использовалось. При этом запись работает так: to top — это градиент снизу вверх, а просто top — это градиент сверху вниз. Современные браузеры понимают градиент только с to.

Синтаксис:

селектор { background: linear-gradient(направление, начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор { background: linear-gradient(to left, red, white);
}

Результат выполнения кода:

селектор { background: linear-gradient(to top left, red, white);
}

Результат выполнения кода:

Добавляем размер

Синтаксис:

селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2);
}

Посмотрим на примере:

селектор { background: linear-gradient(red 30px, blue 50px);
}

В данном случае поведение следующее (и очень неожиданное!): чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до конца — чистый голубой:

Результат выполнения кода:

Добавляем более чем 2 цвета

Синтаксис:

селектор { background: linear-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3…);
}

Посмотрим на примере:

селектор {
background: linear-gradient(red 30px, blue 50px, green 70px);
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до 70px — градиент от голубого до зеленого, а после 70px — чистый зеленый:

Результат выполнения кода:

Резкие переходы

селектор { background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой — от 30px до 60px, чистый зеленый — после 60px (red 0px можно и не писать):

Результат выполнения кода:

Размеры можно задавать и в процентах

селектор { background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
}

В данном случае поведение следующее: чистый красный цвет будет от 0% до 30%, чистый голубой — от 30% до 60%, чистый зеленый — после 60% (red 0% можно и не писать):

Результат выполнения кода:

Сочетание с background-size

селектор { background: linear-gradient(to right, red 30px, blue 30px, blue 60px); background-size: 60px 60px;
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой — от 30px до 60px, при этом все это будет повторяться кусочками по 60px (из-за background-size: 60px;):

Результат выполнения кода:

А вот без background-size при таком же градиенте будет такое:

Результат выполнения кода:

Значения

ЗначениеОписание
Направление Задает определенное направление градиента. Принимаемые значения: top, left, right, bottom или их комбинация: top left, top right и так далее. Порядок слов не важен: можно писать top left и left top, разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top). Обратите внимание на то, что перед направлением в соверменных браузерах ставится слово to.
Угол Угол в любом допустимом в CSS формате. Может быть положительным и отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего).
Цвет1 Начальный цвет градиента в любом CSS формате.
Цвет2 Конечный цвет градиента в любом CSS формате.

Значение по умолчанию: нет (?).

Примеры

Пример

В данном примере градиент направлен снизу вверх (это значит, что красный будет снизу):

#elem { background: red; /* Для старых браузров */ background: -webkit-linear-gradient(to top, red, white); background: -moz-linear-gradient(to top, red, white); background: -o-linear-gradient(to top, red, white); background: linear-gradient(to top, red, white);
}

Результат выполнения кода:

Пример

В данном примере градиент направлен сверху вниз (это значит, что красный будет сверху):

#elem { background: red; /* Для старых браузров */ background: -webkit-linear-gradient(to bottom, red, white); background: -moz-linear-gradient(to bottom, red, white); background: -o-linear-gradient(to bottom, red, white); background: linear-gradient(to bottom, red, white);
}

Результат выполнения кода:

Пример

Сделаем градиентную границу с помощью border-image (как работает border-image — смотрите по ссылке):

#elem { background: green; -webkit-border-image: linear-gradient(to bottom, red, blue) 1; -moz-border-image: linear-gradient(to bottom, red, blue) 1; -o-border-image: linear-gradient(to bottom, red, blue) 1; border-image: linear-gradient(to bottom, red, blue) 1; border-width: 30px; border-style: solid; height: 200px; width: 200px; margin: 0px auto;
}

Результат выполнения кода:

Пример . Несколько градиентов

Зададим одновременно два градиента, линейны и радиальный:

#elem background: linear-gradient(to right, red 0px, blue 30px, transparent 30px), radial-gradient(circle closest-side at center, green, transparent);
}

Результат выполнения кода:

Пример . Рисуем клеточки как в школьной тетради

Нарисуем клеточки как в школьной тетради. Для этого зададим два повторяющихся градиента под углом в 90 градусов друг к другу:

#elem background: repeating-linear-gradient(transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px); background-position: left top; border: 2px solid yellowgreen;
}

Результат выполнения кода:

Пример . Рисуем клеточки с помощью background-size

Предыдущий вариант клеточек не всегда работает корректно. Давайте попробуем другой вариант, с помощью двух обычных (неповторяющихся) градиентов и свойства background-size:

#elem background: linear-gradient(mediumvioletred 0px, mediumvioletred 1px, transparent 1px), linear-gradient(90deg, mediumvioletred 0px, mediumvioletred 1px, transparent 1px); background-size: 10px 10px; background-position: left top; background-repeat: repeat; border: 2px solid mediumvioletred;
}

Результат выполнения кода:

Источник: http://code.mu/css/linear-gradient.html

CSS: Линейный градиент для фона

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

Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги — подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

CSS3 определяет два типа градиентов:

  • Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
  • Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.

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

Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

  • В качестве первого аргумента указывается градус угла или ключевые слова, определяющие угол направления линии градиента. Необязательный аргумент.
  • Разделяемый запятыми список состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

div { background-image: linear-gradient(black, white); width: 200px; height: 200px; } Попробовать »

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

Направление линии градиента может быть определено двумя способами:

Использование градусовВ качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов.Использование ключевых словВ качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.

Угол можно так же задать с помощью двух ключевых слов, например, to top right — линия градиента направлена в верхний правый угол.

Пример градиента заданного в разных направлениях:

div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to left, black, red); } #two { background-image: linear-gradient(to top left, black, red); } #three { background-image: linear-gradient(65deg, black, yellow); } Попробовать »

Важно

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

div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to right, red, blue, yellow); } #two { background-image: linear-gradient(to top left, blue, white, blue); } Попробовать »

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

Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента.

Значение 0% является начальной точкой градиента, 100% — конечной.

div { margin: 10px; width: 200px; height: 200px; float: left; } #one { background-image: linear-gradient(to top right, blue, white 70%, blue); } #two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);} #three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); } Попробовать »

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

div { margin: 10px; width: 300px; height: 100px; background-color: green; } #one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); } #two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); } Попробовать »

Источник: https://puzzleweb.ru/css/19_css_gradient.php

CSS функция linear-gradient()


to left to right to top to bottom
to left top to right top to left bottom to right bottom

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

Читайте также:  Что такое seo-текст

Результат нашего примера представлен на изображении:

Позиция градиента (использование ключевых слов).

Рассмотрим как указать позицию градиента с использованием градусов:

linear-gradient(135deg, blue, white, red);

В данном примере мы создали элемент высотой 100 пикселей (ширина автоматически растягивается на весь экран). Задали для него трехцветный градиент под углом 135 градусов. Кроме того применили вертикальное выравнивание, выравнивание текста по центру и установили высоту строки равную высоте элемента.

Позиция градиента (использование градусов).

Рассмотрим использование точек остановки градиента на следующем примере:

linear-gradient(to right, red 5%, green, blue linear-gradient(to right, red 10%, green, blue) linear-gradient(to right, red 50%, green, blue) linear-gradient(to right, red 80%, green, blue) linear-gradient(to right, red 15%, green 60%, blue 70%)

В данном примере мы создали пять элементов высотой 50 пикселей (ширина автоматически растягивается на весь экран). Задали для них трехцветный градиент, располагающийся слева направо.

Кроме того, применили вертикальное выравнивание, выравнивание текста по центру, установили высоту строки равную высоте элемента и указали внешний отступ с нижней стороны равный 0.7em.

Для первых четырех блоков указаны значения точки остановки только для красного цвета (остальные цвета занимают равномерное расстояние).

Для последнего блока мы указали три точки остановки:

  • Первая точка – для красного градиента (15%);
  • Вторая точка – для зеленого градиента (60%);
  • Третья точка – для синего градиента (70%). Это значение не повлияет на отображение, так как после этого градиента нет других цветов, и он в любом случае растянется в ширину всего элемента.

Результат нашего примера:

Рис. 128 Пример использования точек остановки градиента.

Современный стандарт CSS по аналогии работы с фоновыми изображениями позволяет указать для одного элемента несколько линейных градиентов (функций). Для этого необходимо перечислить их через запятую.

background-image / background: linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn),
/* запятые после каждой функции обязательны */
linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn), …
linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn);

В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента, которые мы укажем в одном объявлении:

  • Первый градиент задает сверху вниз три части градиенту: 30% красный цвет, с 30% до 70% прозрачный и оставшаяся часть красный цвет. Зеленым отображен прозрачный участок.
  • Второй градиент задает слева направо (под углом 90 градусов) симметричное сочетание красный – прозрачный – прозрачный – белый – белый – прозрачный – прозрачный – красный. Как вы можете догадаться, повтор цвета необходим, чтобы убрать плавный переход между цветами (отсутствие размытия).
  • Третий градиент придает окончательный вид, флагу окрашивая не нужные в нашей композиции места.

Порядок наложения градиентов в примере.

Результат нашего примера:

Пример создания флага Швейцарии с использованием нескольких градиентов.CSS функции

Источник: https://basicweb.ru/css/css_func_linear-gradient.php

Как сделать линейный градиент для фона — учебник CSS

Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета.

В линейном градиенте переход происходит по прямой, от точки A к точке B.

Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.

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

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image. В качестве значения используется ключевое слово linear-gradient(), где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

background-image: linear-gradient(to left, violet, red); Фоновый градиент на блоке400×400px

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left, right, top и bottom, которые можно комбинировать для изменения наклона. Например:

background-image: linear-gradient(to bottom right, #ee82ee, #ff0000);

Совет

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

background-image: linear-gradient(-110deg, #ee82ee, #ff0000);

Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.

Несколько опорных точек

Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:

background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple);

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

Длина переходов

По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:

background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2);

В нашем коде после цвета #92009b указано значение 20%. Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента.

После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%).

После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2.

Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.

Вендорные префиксы

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

  • -webkit- — префикс для Chrome, Safari, Android;
  • -moz- — префикс для Firefox;
  • -o- — префикс для Opera.

Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:

background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);

Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.

Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н.

«заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом.

Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image. Тогда значение background-color будет перезаписано на transparent.

Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/linear-gradient

CSS Gradient Generator

IEEdgeFirefoxChromeSafariOperaiOS SafariOperaMiniAndroidBrowserChromeAndroid

10+ 12+ 16+ 26+ 6.1+ 12 7.1+ x 4.4+ 46+

The CSS Gradient generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format.

What is a CSS Gradient?

CSS3 gradients let you display smooth transitions between two or more specified colors.Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.CSS3 defines two types of gradients:

— Linear Gradients (goes down/up/left/right/diagonally)

— Radial Gradients (defined by their center)

Definition from W3Schools

The CSS data type denotes a CSS made of a progressive transition between two or more colors. A CSS gradient is not a CSS but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.

There are three kinds of color gradients:- linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.- radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.

— repeating gradients, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.

Definition from MDN — Mozilla Developer Network

Where can I find more information about CSS gradients?

Обратите внимание

You can find more informaiton about CSS gradient at W3Schools, Mozilla Developer Network, W3C, QuirksMode. Compatibility Data from Can I Use. More information about compatibility on Desktop and Network.

What is a CSS Linear Gradient?

A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line.

The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect.

This produces a smooth fade from each color to the next, progressing in the specified direction.

Definition from W3C

What is a CSS Radial Gradient?

In a radial gradient, rather than colors smoothly fading from one side of the gradient box to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.

A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient().

Starting from the gradient center and progressing towards (and potentially beyond) the ending shape uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.

Definition from W3C

Источник: https://www.css-gradient.com/

СSS3 Градиент

Градиентный Фон

CSS3 градиенты позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS3 определяет два типа градиентов:

  • Линейные градиенты (вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяются по центру)

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

Для создания линейного градиента необходимо определить по крайней мере, два цвета. Остановки цвета — это цвета, которые вы хотите отобразить плавными переходами. Можно также задать начальную точку и направление (от угола) вдоль с эффектом градиента.

Синтаксис

Фон: линейный градиент(направление, цвет-стоп1, цвет-стоп2, …);

Линейный градиент — сверху вниз (по умолчанию)

В следующем примере показан линейный градиент, начинающийся сверху. Он начинает красный, переход к желтому:

#grad {    background: linear-gradient(red, yellow);

}

Редактор кода »

Линейный градиент — слева направо

В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переходит в желтый:

#grad {  background: linear-gradient(to right, red , yellow);

}

Редактор кода »

Линейный градиент — по диагонали

Вы можете сделать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.

Важно

В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет в нижний правый угол). Он начинается красным, переход к желтому:

#grad {  background: linear-gradient(to bottom right, red, yellow);

}

Редактор кода »

Если вы хотите больше контроля над направлением градиента, вы можете определить угол, вместо предопределенных направлений (снизу, сверху, справа, слева, снизу справа и т. д.).

Читайте также:  Как писать продающие тексты

Синтаксис

Фон: линейный градиент(угол, цвет-стоп1, цвет-стоп2);

Угол определяется, как угол между горизонтальной линией и линией градиента.

В следующем примере показано, как использовать углы для линейных градиентов:

#grad {  background: linear-gradient(-90deg, red, yellow);

}

Редактор кода »

В следующем примере показан линейный градиент (сверху-вниз) внесколько цветовых стоков:

#grad {  background: linear-gradient(red, yellow, green);

}

Редактор кода »

В следующем примере показано, как создать линейный градиент (слева-направо) с цветом радуги и текстом:

Разночветный фон

#grad {  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

}

Редактор кода »

Градиенты CSS3, также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.

Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых стопов. Последним параметром в функции rgba(), может быть значение от 0 до 1, и это определяет прозрачность цвета: 0 означает полную прозрачность, 1 указывает на полный цвет (без прозрачности).

В следующем примере показан линейный градиент, начинающийся слева. Он начинает полно-прозрачным, переходящий к полному красному цвету:

#grad {  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

}

Редактор кода »

Функция repeating-linear-gradient() используется для повтора линейных градиентов:

Повторяющийся линейный градиент:

#grad {  background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

Редактор кода »

Радиальный градиент определяется по центру.

Чтобы создать радиальный градиент, необходимо определить как минимум два цвета.

Синтаксис

фон: радиальный градиент(формировать размер at положение, начало-цвет, …, последний-цвет);

По умолчанию форма эллипс, размер, самый дальний угол и положение по центру.

Радиальный градиент — равномерно расположенные остановки цвета (по умолчанию)

В следующем примере показан радиальный градиент равномерного цвета:

#grad {  background: radial-gradient(red, yellow, green);

}

Редактор кода »

Радиальный градиент — различные цветовые остановки

В следующем примере показан радиальный градиент с различными цветовыми остановками:

#grad {  background: radial-gradient(red 5%, yellow 15%, green 60%);

}

Редактор кода »

Параметр shape определяет фигуру. Может принимать значение circle или ellipse. Значение по умолчанию — ellipse.

В следующем примере показан радиальный градиент с фигурой круга:

#grad {  background: radial-gradient(circle, red, yellow, green);

}

Редактор кода »

Параметр side определяет размер градиента. Он может принимать четыре значения:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Радиальный градиент с разными ключевыми словами размера:

#grad1 {  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);} #grad2 {  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

}

Редактор кода »

Повторение радиального градиента

Функция repeating-radial-gradient() используется для повтора радиальных градиентов:

Повторяющийся радиальный градиент:

#grad {  background: repeating-radial-gradient(red, yellow 10%, green 15%);

}

Редактор кода »

Источник: https://schoolsw3.com/css/css3_gradients.php

linear-gradient()

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .

As with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient() function instead.

Because s belong to the data type, they can only be used where s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the data type.

Composition of a linear gradient

A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant.

Совет

The ending point can be simply understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called magic corners: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

Customizing Gradients

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using a or a . If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.

You can move this midpoint to anypoint between two color stops by adding a color hint between the two colors, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue of the middle 80% of the gradient, with the final 10% being solid blue.

The midpoint of the gradient, however, is at the 30% mark rather than the 50% mark as would have happened without the 30% color hint.

linear-gradient(red 10%, 30%, blue 90%);

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. 

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

linear-gradient(red 40%, yellow 30%, blue 65%);

Обратите внимание

Multi-position color stop are allowed. A color can be declared as two adjacent color stops by including both positions in the CSS declaration. The following three gradients are equivalent:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

Syntax

/* A gradient tilted 45 degrees, starting blue and finishing red */
linear-gradient(45deg, blue, red); /* A gradient going from the bottom right to the top left corner, starting blue and finishing red */
linear-gradient(to left top, blue, red); /* Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */
linear-gradient(0deg, blue, green 40%, red); /* Color hint: A gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Values

The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.

The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.

A color-stop's value, followed by one or two optional stop positions, (each being either a or a along the gradient's axis).The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops.

The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Formal syntax

linear-gradient( [ | to ,]? ) ———————————/ —————————-/ Definition of the gradient line List of color stops where = [ left | right ] || [ top | bottom ] and = [ [, ? ]? ]#, and = [ ]? and = [ | ]{1,2} and = [ | ]

Examples

Gradient at a 45-degree angle

body { background: linear-gradient(45deg, red, blue);
}

Gradient that starts at 60% of the gradient line

body { background: linear-gradient(135deg, orange, orange 60%, cyan);
}

Gradient with multi-position color stops

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

body { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

Note: Please see Using CSS gradients for more examples.

Specifications

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

Chrome Full support 26Full support 26Full support 10

Prefixed

Prefixed Implemented with the vendor prefix: -webkit-

Edge Full support 12 Firefox Full support 16

Notes

Full support 16

Notes

Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.Full support 3.6

Prefixed Notes

Prefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.Notes Considers to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.Full support 49

Prefixed

Prefixed Implemented with the vendor prefix: -webkit-Full support 44

Prefixed Disabled

Prefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE Full support 10

Notes

Full support 10

Notes

Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().

Opera Full support 12.1Full support 12.1No support 11 — 15

Prefixed Notes

Prefixed Implemented with the vendor prefix: -o-Notes Considers to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.Full support 15

Prefixed Notes

Prefixed Implemented with the vendor prefix: -webkit-Notes Considers to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.

Safari Full support 6.1Full support 6.1Full support 5.1

Prefixed Notes

Prefixed

Источник: https://developer.mozilla.org/en/CSS/linear-gradient

Ссылка на основную публикацию