Функция linear-gradient

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

Синтаксис

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

Значения

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

Синтаксис:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Пример . Добавляем угол

Синтаксис:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

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

Синтаксис:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

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

Укажем другое направление:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Пример . Добавляем размер

Синтаксис:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Пример . Добавляем более чем 2 цвета

Синтаксис:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Пример . Резкие переходы

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

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

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Пример . Сочетание с background-size

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

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Смотрите также