Радиальный градиент. Gradients CSS уроки для начинающих академия Примеры с радиальными градиентами
Рис. 1. Радиальный и линейный градиент
Радиальный градиент создаётся с помощью свойства background или background-image .
Синтаксис
background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? ,
| [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? ,
| [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? ,
| at <позиция> ,
<цвет> [ , <цвет> ]*)
Обозначения
| Описание
| Пример
|
---|
<тип>
| Указывает тип значения.
| <размер>
|
A && B
| Значения должны выводиться в указанном порядке.
| <размер> && <цвет>
|
A | B
| Указывает, что надо выбрать только одно значение из предложенных (A или B).
| normal | small-caps
|
A || B
| Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
| width || count
|
| Группирует значения.
| [ crop || cross ]
|
*
| Повторять ноль или больше раз.
| [,<время>]*
|
+
| Повторять один или больше раз.
| <число>+
|
?
| Указанный тип, слово или группа не является обязательным.
| inset?
|
{A, B}
| Повторять не менее A, но не более B раз.
| <радиус>{1,4}
|
#
| Повторять один или больше раз через запятую.
| <время>#
|
Значения
circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>
Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.
- top left = left top = 0% 0% (в левом верхнем углу);
- top = top center = center top = 50% 0% (по центру вверху);
- right top = top right = 100% 0% (в правом верхнем углу);
- left = left center = center left = 0% 50% (по левому краю и по центру);
- center = center center = 50% 50% (по центру) - это значение по умолчанию;
- right = right center = center right = 100% 50% (по правому краю и по центру);
- bottom left = left bottom = 0% 100% (в левом нижнем углу);
- bottom = bottom center = center bottom = 50% 100% (по центру внизу);
- bottom right = right bottom = 100% 100% (в правом нижнем углу).
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента Значение
| Код
| Описание
| Вид
|
---|
closest-side
| background: radial-gradient(circle closest-side
at 30px 20px, #fff, #000); background: radial-gradient(closest-side
at 30px 20px, #fff, #000);
| Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса).
| |
| background: radial-gradient(circle closest-corner at 30px 20px
, #fff, #000); background: radial-gradient(closest-corner at 30px 20px
, #fff, #000);
| Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
| |
| background: radial-gradient(circle farthest-side at 30px 20px
, #fff, #000); background: radial-gradient(farthest-side at 30px 20px
, #fff, #000);
| Похож по своему действию на closest-side
, но градиент распространяется до дальней стороны блока.
| |
farthest-corner
| background: radial-gradient(circle farthest-corner at 30px 20px
, #fff, #000); background: radial-gradient(farthest-corner at 30px 20px
, #fff, #000);
| Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,
| |
Пример
Градиент
Градиент
Этот элемент помогает в случае, когда вы находитесь в осознании того
факта, что совершенно не понимаете, кто и как вам может помочь. Именно
в этот момент мы и подсказываем, что помочь вам никто не сможет.
Результат данного примера показан ниже.
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient()
.
Opera до версии 12.10 поддерживает -o-radial-gradient()
.
Firefox до версии 16 поддерживает -moz-radial-gradient()
.
Все свойства с префиксами не используют ключевое слово at
при задании положения отправной точки градиента.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация
) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация
) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик
) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации
) - первая черновая версия стандарта.
CSS-градиент
представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
Как сделать градиент в CSS
Поддержка браузерами
IE:
10.0
Firefox:
16, 3.6 -moz-
Chrome:
26.0, 10.0 -webkit-
Safari:
6.1, 5.1 -webkit-
Opera:
12.1, 11.1 -o-
iOS Safari:
7.1
Opera Mini:
—
Android Browser:
4.4, 4.1 -webkit-
Chrome for Android:
44
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 (к дальнему углу).
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);
}
Почтовая марка
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
Jpg">
.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. Кроссбраузерный градиент
Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.
Линейный градиент
Ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */
background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */
background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */
background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
Повтор линейного градиента
Background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */
Радиальный градиент
Background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */
background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */
Повтор радиального градиента
Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */
5. Комбинация градиента и фонового изображения
За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.
div {
height: 453px;
background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, ..jpg);
background-size: cover;
}
Радиальный градиент распространяется из центральной точки градиента во все стороны в форме круга или эллипса (форма по умолчанию), демонстрируя плавный переход от одного оттенка цвета к другому. Радиальный градиент создаётся с помощью функции radial-gradient(). Функция создаёт изображение, которое представляет собой радиальный градиент между указанными оттенками цветов. По умолчанию размер градиента соответствует размеру элемента, к которому он применён.
Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:
- В качестве первого аргумента указываются ключевые слова и/или единицы измерения CSS, определяющие конечную форму, размер и начальное расположение градиента. Необязательный аргумент.
- Разделяемый запятыми список, состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.
Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:
Div {
background-image: radial-gradient(cyan, indigo);
width: 400px;
height: 100px;
}
Попробовать »
Как и в случае использования линейных градиентов, радиальный градиент может включать список более чем из двух цветов, и к любому цвету можно указать стоп позицию.
Div {
width: 400px;
height: 100px;
margin: 10px;
}
#one { background-image: radial-gradient(cyan, yellow, indigo, white); }
#two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); }
Попробовать »
Форму радиального градиента можно определить с помощью ключевых слов circle (круг) и ellipse (эллипс), указав одно из них в качестве первого аргумента:
Div {
width: 400px;
height: 100px;
margin: 10px;
}
#one { background-image: radial-gradient(ellipse, cyan, indigo); }
#two { background-image: radial-gradient(circle, cyan, indigo); }
Попробовать »
По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:
Значение
| Описание
|
---|
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
| Если вы указываете только одно ключевое слово, второе будет "center".
|
x% y%
| Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%.
|
x-pos y-pos
| Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.
|
Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):
Div {
width: 400px;
height: 100px;
margin: 10px;
}
#one { background-image: radial-gradient(at right, cyan, indigo); }
#two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); }
#three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); }
Попробовать »
Размер градиента (на сколько большой должна быть конечная форма градиента), можно определить с помощью одного из четырёх ключевых словосочетаний или указания радиуса с помощью единиц измерения CSS (для определения радиуса нельзя использовать проценты).
Ключевые слова
| Описание
|
|
---|
Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса).
|
|
Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента.
|
|
Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса).
|
|
Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса.
|
|
Ключевые слова, определяющие размер градиента или радиус, указываются до или после ключевого слова, определяющего форму, и обязательно до определения позиции.
Div {
width: 400px;
height: 100px;
margin: 10px;
}
#one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); }
#two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); }
#three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); }
#four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan,
#90EE90, rgba(172,160,160,0)); }
При разработке дизайна проекта бывают случаи, когда необходимо создать градиент на сайте
, то есть плавный переход цвета из одного в другой. Раньше сделать это стандартными средствами была проблематично, но с появлением CSS3 стало возможным делать градиенты быстро и просто.
Для получения эффекта градиента нередко можно увидеть использование специальных картинок, на которых создан градиент в графическом редакторе. Но это не самый практичный способ, плюс лишняя загрузка картинки на сайте, что само по себе уменьшает скорость загрузки сайта. А если таких картинок много, тогда все еще хуже. Поэтому нужно было что-то с этим делать.
Градиент может часто пригодиться на любом сайте, поэтому в CSS3 было решено добавить функционал для создания таких градиентов. Различают линейный и радиальный градиенты
. На рисунке выше, слева – линейный, справа – радиальный градиент. Если вдруг браузер не будет поддерживать градиент, то для этого в файле стилей выше строки задания градиента, следует указать простой фон для элемента.
Для создания линейного градиента существует значение linear-gradient
, для радиального radial-gradient
. Кроме того, существуют две функции для повтора градиента repeating-linear-gradient
и repeating-radial-gradient
. Отдельного свойства для добавления градиента не предусмотрено, он считается фоновым изображением, поэтому добавляется через свойства:
- background,
- background-image,
- border-image,
- list-style-image.
Рассмотрим примеры создания градиентов. Градиент создается при помощи соответствующей функции и ее параметров. Первый параметр функции – это позиция, можно использовать ключевые слова. Второй и третий параметры - это значение цвета и его положение в градиенте.
Для указания позиции вначале пишется to
, а затем добавляются ключевые слова top, bottom, left, right
и их сочетания, порядок слов не важен. Также, вместо ключевого слова можно задавать угол наклона градиентной линии, показывающий направление градиента. Сначала пишется положительное или отрицательное значение угла, после чего к нему добавляется deg
, пример - 30deg.
Чтобы создать сложный градиент, понадобится больше чем 2 цвета - CSS3 позволяет добавить неограниченное количество цветов через запятую. Можно применить прозрачный и полупрозрачный цвета. Для точного позиционирования цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах.
Что касается радиальных градиентов, то они похожи на линейные градиенты. Чем отличаются линейный и радиальный градиент
? Тем, что в радиальных один цвет переходит в другой словно круги по воде вокруг точки, а не вдоль прямой линии. Есть две формы радиального градиента: circle
(круг) и ellipse
(эллипс). Они различаются внешним видом, по умолчанию используется форма эллипс. Также с формой градиента можно задать и его размер, зависящий от применяемых ключевых слов - размер указывается через пробел после формы градиента.
Подробно увидеть возможные значения параметров этих функций можно в консоли разработчика, указав нужную функцию – после развернуть список значений кликнув по стрелочке.
Таким образом, создать градиент с помощью CSS
может каждый. При помощи градиентов можно делать уникальные элементы на сайте, например, при помощи градиентов и свойства background-size
можно получить различные фоновые картинки без использования изображений. Но самому разрабатывать градиенты может быть не очень удобно, поэтому в сети есть готовые сервисы для генерации кода градиентов.
Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.
Для самого простого градиента достаточно задать только цвета:
Background: radial-gradient(gold, orangered);
По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:
Помимо цветов градиенту можно задавать форму, положение и размер. Параметры сочетаются и ведут себя сложнее, чем в линейных градиентах.
Форма
(конечная фигура градиента) может быть кругом и эллипсом. По умолчанию - эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.
Чтобы градиент имел форму круга - это нужно задать явно с помощью ключевого слова circle .
Если форма не задана, но задан размер - одно значение задает радиус круга, если значений два - градиент получает форму эллипса.
При наличии размеров явное задание формы градиента игнорируется.
Положение
определяет где будет расположен центр
градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top , at right , at bottom , at left и at center - значение по умолчанию.
Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top - в верхнем правом углу.
Ниже можно увидеть как работают разные положения:
Код первого квадрата:
Background: radial-gradient(at top left, purple, crimson, orangered, gold);
Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .
Размер
определяет размеры конечной фигуры градиента. Для эллиптических градиентов значения можно задавать в процентах, для круглых - нет.
Если задано одно значение - оно считается радиусом круглого градиента.
Если задано два значения - первое считается горизонтальным радиусом эллипса, второе - вертикальным.
Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:
Также можно использовать ключевые слова:
closest-side - градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента.
farthest-side - градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.
closest-corner - конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура - эллипс, градиент растягивается на всю фигуру.
При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.
farthest-corner - аналогично closest-corner , только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.
Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:
Радиальный градиент также может быть повторяющимся - это repeating-radial-gradient .
Примерный код:
Background: repeating-radial-gradient(circle,
darkkhaki, darkkhaki .5em,
transparent .5em, transparent 1.5em);
Как и в случае с линейным градиентом, повторяющийся градиент не очень аккуратно отрисовывается.
Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:
Если при создании узоров использовать относительные единицы (em , %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.