CSS линеен градиент, обяснен с примери

При линеен градиент цветовете се движат в една посока, например отляво надясно, отгоре надолу или всеки ъгъл, който изберете.

Градиент с два цветни ограничителя

Синтаксис

За да създадете линеен градиент, трябва да дефинирате поне две цветни спирания. Те са цветовете, сред които са създадени преходите. Той се декларира или в свойствата на фона, или във фоновото изображение .

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Ако не е посочена посока, преходът по подразбиране е отгоре надолу.

Примери

От горе до долу:

background: linear-gradient(red, yellow);
От горе до долу

Наляво, за да R раво:

За да го направите отляво надясно, добавяте допълнителен параметър в началото на linear-gradient()началото с думата, към която се посочва посоката:

background: linear-gradient(to right, red , yellow);
Отляво надясно

Диагонални градиенти :

Можете също да прехвърлите градиент по диагонал, като посочите хоризонтални и вертикални начални позиции, например горе-ляво или долно-дясно.

Ето пример за градиент, започващ отгоре вляво:

 background: linear-gradient(to bottom right, red, yellow);
Горе вляво

Използване на ъгли за определяне на посоката на градиента

Можете също да използвате ъгли, за да бъдете по-точни при посочване на посоката на градиента:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Ъгълът се определя като ъгъл между хоризонтална линия и градиентна линия.

background: linear-gradient(90deg, red, yellow);
90 градуса

Използване на повече от два цвята

Не сте ограничени само до два цвята - можете да използвате толкова цветове, разделени със запетая, колкото искате.

background: linear-gradient(red, yellow, green); 
Градиент с 3 цветни спирки

Можете също да използвате други цветови синтаксиси като RGB или шестнадесетични кодове, за да зададете цветовете.

Твърдият цвят спира

Можете не само да използвате градиенти за преход с избледняващи цветове, но можете да го използвате и за мигновено преминаване от един плътен цвят в друг плътен цвят:

background: linear-gradient(to right,red 15%, yellow 15%);
Твърдият цвят спира

Повече информация:

  • Наръчникът за CSS: удобно ръководство за CSS за разработчици