Функција 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;
}

Результат:

Погледајте такође