Функцыя 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;
}

Результат:

Глядзіце таксама