Готовые полосы прокрутки на Blogger

Вы знаете, что можно на блоге поменять полосу прокрутки на любой другой цвет? Сегодня расскажу как это сделать, а так же предложу несколько готовых кодов. Устанавливаются коды очень просто — заходим в шаблон, и перед ]]></b:skin> вставляем готовый код или редактируем предложенный. Коды взяты с зарубежных сайтов и немного отредактированы — поменяла цвет. А главное, я расписала, как поменять оформление прокрутки под свой вкус.

Виды полос

1. Оформление градиентом в красных тонах.

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #b0e0e6;
background: #ff441f;
background: -webkit-linear-gradient(to right, #1e1112, #ff441f);
background: linear-gradient(to right, #1e1112, #ff441f);
}
::-webkit-scrollbar-thumb:hover {
background: #8B0000;
}
::-webkit-scrollbar-thumb:active {
background: #6b2d28;
}

Синим цветом отмечены коды цвета градиента
Красным — цвет полосы при наведении курсора
Зелёный — цвет при прокрутке
Розовый — ширина прокрутки

2. Прокрутка с градиентом в синих тонах.

Так же добавлен цвет полосы прокрутки. 

::-webkit-scrollbar {
width: 11px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: #1a2a6c;
background: -webkit-linear-gradient(to right, #1133bb, #b0e0e6, #1a2a6c);
background: linear-gradient(to right, #1133bb, #b0e0e6, #1a2a6c);
}
::-webkit-scrollbar-thumb:hover {
background: #C0C0C0;
}
::-webkit-scrollbar-thumb:active {
background: #808080;
}
::-webkit-scrollbar-track {
background: #00BFFF;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-corner {
background: transparent;
}

Ширина прокрутки — красный цвет
Градиент — оранжевый цвет
Цвет прокрутки при наведении курсора — салатовый
Цвет прокрутки при движении — розовый
Цвет полосы прокрутки — синий

3. Прокрутка в косую полоску, линейный градиент.

::-webkit-scrollbar {
width: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #680BAB;  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,
transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:active {
background: #963FD5;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Для изменения в коде отметила:
Ширина прокрутки — красным
Цвет прокрутки — синим
Цвет при наведении курсора — розовым
Цвет полосы прокрутки — зелёный

.
4. Однотонная прокрутка с закруглёнными краями.

::-webkit-scrollbar{
width: 11px;
}
::-webkit-scrollbar-track{
background: #eeeeee;
}
::-webkit-scrollbar-thumb{
background: #008500;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{
background: #08A67C;
}

Для изменения, в коде отметила:
Ширина прокрутки — красным цвет, чем больше значение, тем шире прокрутка
Цвет полосы — синим
Цвет прокрутки — розовым
Цвет при наведении курсора — зелёным

5. Зелёная прокрутка.
У этой прокрутки градиентная полоса скольжения.

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 8px #00B141;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background: seagreen;
}
::-webkit-scrollbar-thumb:active {
background: #000;
}

Красным в коде отметила — ширину прокрутки
Синим — прокрутку
Зелёным — цвет при наведении курсора
Розовым — цвет прокрутки при движении
Оранжевым — цвет полосы прокрутки

6. Полоса прокрутки в фиолетовых тонах

::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #9383d4;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #45036F), color-stop(1.00, #856FD7));
background: -webkit-linear-gradient(#45036F, #856FD7);
background: -moz-linear-gradient(#45036F, #856FD7);
background: -o-linear-gradient(#45036F, #856FD7);
background: -ms-linear-gradient(#45036F, #856FD7);
background: linear-gradient(#45036F, #856FD7);
}
::-webkit-scrollbar-thumb:hover {
background: #8000ff;
}
::-webkit-scrollbar-thumb:active {
background: #6600ff;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным отметила — цвета градиента (обратите внимание, что цвета повторяются, менять нужно так же.  Это относится и к другим кодам прокруток)
Оранжевым — цвет при наведении курсора
Салатовым — цвет прокрутки при движении
Голубым — фон полосы прокрутки
Розовый — ширина прокрутки
Фиолетовым — скругление углов (0 - прямые углы)

7. Скроллинг жёлто-зелёный.

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #D2F700;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #819F00), color-stop(0.20, #FFF473), color-stop(0.50, #C6F500), color-stop(0.51, #FFDD73), color-stop(0.75, #D2F700), color-stop(1.00, #A69500));
background: -webkit-linear-gradient(top, #819F00 0%, #FFF473 20%, #C6F500 50%, #FFDD73 51%, #D2F700 75%, #A69500 100%);
background: -moz-linear-gradient(top, #819F00 0%, #FFF473 20%, #C6F500 50%, #FFDD73 51%, #D2F700 75%, #A69500 100%);
background: -o-linear-gradient(top, #819F00 0%, #FFF473 20%, #C6F500 50%, #FFDD73 51%, #D2F700 75%, #A69500 100%);
background: -ms-linear-gradient(top, #819F00 0%, #FFF473 20%, #C6F500 50%, #FFDD73 51%, #D2F700 75%, #A69500 100%);
background: linear-gradient(to bottom, #819F00 0%, #FFF473 20%, #C6F500 50%, #FFDD73 51%, #D2F700 75%, #A69500 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #D2F700;
}
::-webkit-scrollbar-thumb:active {
background: #A68600;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным отметила коды цвета градиента, которые можно поменять
Синим — цвет прокрутки при наведении курсора
Розовым — цвет при движении скроллинга
Зелёным — цвет полосы прокрутки
Голубым — скругление углов (0 - прямые углы прокрутки)

8. Зелёный градиент ползунка.

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f));
background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #008542;
}
::-webkit-scrollbar-thumb:active {
background: #004522;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным отмечаю цвета градиента — если в коде есть повторяющиеся цвета, то каждый из них заменяем одним и тем же цветом, например код  #2e7c2f повторяется 6 раз, значит меняем его на один и тот же цвет.
Оранжевым — ширина ползунка
Розовым — закругление ползунка
Салатовым — цвет при наведении указателем
Голубым — цвет при движении ползунка
Синим — цвет полосы ползунка

9. Прокрутка мульти-синяя.

::-webkit-scrollbar {
width: 8px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #00008B), color-stop(0.77, #0000FF), color-stop(0.63, #4169E1), color-stop(0.33, #00BFFF), color-stop(0.20, #B0E0E6));
background: -webkit-linear-gradient(top, #B0E0E6 20%, #00BFFF 33%, #4169E1 63%, #0000FF 77%, #00008B 100%);
background: -moz-linear-gradient(top, #B0E0E6 20%, #00BFFF 33%, #4169E1 63%, #0000FF 77%, #00008B 100%);
background: -o-linear-gradient(top, #B0E0E6 20%, #00BFFF 33%, #4169E1 63%, #0000FF 77%, #00008B 100%);
background: -ms-linear-gradient(top, #B0E0E6 20%, #00BFFF 33%, #4169E1 63%, #0000FF 77%, #00008B 100%);
background: linear-gradient(to bottom, #B0E0E6 20%, #00BFFF 33%, #4169E1 63%, #0000FF 77%, #00008B 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #191970;
}
::-webkit-scrollbar-thumb:active {
background: #00CED1;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным отметила ширину прокрутки
Розовым — градиент (повторяющиеся коды цвета меняем на одинаковые цвета)
Голубым — цвет прокрутки при наведении указателя
Синим — цвет при движении ползунка
Салатовым — фон полосы прокрутки

10. Стиль голубой.
У скроллинга меняется цвет полосы прокрутки при движении ползунка

::-webkit-scrollbar {
width: 12px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #00FFFF), color-stop(1.00, #00BFFF));
background: -webkit-linear-gradient(#00FFFF, #00BFFF);
background: -moz-linear-gradient(#00FFFF, #00BFFF);
background: -o-linear-gradient(#00FFFF, #00BFFF);
background: -ms-linear-gradient(#00FFFF, #00BFFF);
background: linear-gradient(#00FFFF, #00BFFF);
}
::-webkit-scrollbar-thumb:hover {
background: #1E90FF;
}
::-webkit-scrollbar-thumb:active {
background: #6495ED;
}
::-webkit-scrollbar-track {
background: #E6E6FA;
}
::-webkit-scrollbar-track:active {
background: #E0FFFF;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Зелёный — ширина прокрутки
Красный — цвета градиента
Оранжевый — цвет при наведении указателя
Салатовый — цвет при движении ползунка
Синий — цвет полосы прокрутки
Розовый — цвет полосы при движении ползунка

11. Серая, тонкая, простая прокрутка.

::-webkit-scrollbar {
background: transparent;
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #354039;
box-shadow: inset 0 0 2px #778899;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным отметила ширину ползунка
Оранжевым — цвет ползунка
Зелёным  — тень внутри ползунка

12. Ползунок в серых, серебристых тонах.
Прокрутка с градиентом и с градиентным hover эффектом

::-webkit-scrollbar {
width: 9px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #696969), color-stop(1.00, #D3D3D3));
background: -webkit-linear-gradient(#696969, #D3D3D3);
background: -moz-linear-gradient(#696969, #D3D3D3);
background: -o-linear-gradient(#696969, #D3D3D3);
background: -ms-linear-gradient(#696969, #D3D3D3);
background: linear-gradient(#696969, #D3D3D3);
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #C0C0C0), color-stop(1.00, #708090));
background: -webkit-linear-gradient(#C0C0C0, #708090);
background: -moz-linear-gradient(#C0C0C0, #708090);
background: -o-linear-gradient(#C0C0C0, #708090);
background: -ms-linear-gradient(#C0C0C0, #708090);
background: linear-gradient(#C0C0C0, #708090);
}
::-webkit-scrollbar-thumb:active {
background: #808080;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Красным выделила цвета градиента
Зелёным — цвета градиента при наведении курсора на ползунок
Синим — цвет ползунка в движении
Оранжевым — цвет полосы прокрутки
Жёлтым — ширина ползунка

13. Красный ползунок с чёрной полосой прокрутки.

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000000;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #FF0000;
}

Красным цветом выделила в коде цвет ползунка 

Оранжевым — ширину

Синим — цвет дорожки

 

14. Красивый градиентный ползунок.

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background:#c9d5ea;
background:linear-gradient(135deg,#000000 0,#FF0000 50%,#FFFF00 50%,#000000 100%);}

Далее меняем в кодах цвет и размер ползунка по аналогии с первыми вариантами. Изменить самим скроллинг несложно. Ниже посмотрите скриншот и будет понятно, что в коде чему соответствует.

15. Яркий ползунок с hover-эффектом.

::-webkit-scrollbar {
width:12px; /*——Change width of scrollbar——*/
height:8px; /*——Change height of scrollbar——*/
}
::-webkit-scrollbar-track {
background:#111;
background:linear-gradient(135deg,#111 0,#444 50%,#444 50%,#111 100%); /*——Change background color of scrollbar track ——*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c9d5ea;background:linear-gradient(135deg,#d3416f 0,#6217ed 50%,#6217ed 50%,#d3416f 100%); /*—— Scrollbar Thumb color ——*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4);
background:#c9d5ea;background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%); /*——Scrollbar Thumb Hover color ——*/
}
::-webkit-scrollbar-thumb:active {
background:#c9d5ea;
background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%); /*——Scrollbar Thumb Active color ——*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}

16. Ползунок в полоску.

::-webkit-scrollbar
{
width: 10px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
}
::-webkit-scrollbar-thumb:hover {
background: #DC143C;
}
::-webkit-scrollbar-thumb:active {
background: #B22222;
}
::-webkit-scrollbar-track {
background: #FFC0CB;
}
::-webkit-scrollbar-track:active {
background: #E9967A;
}
::-webkit-scrollbar-corner {
background: transparent;
}

 17. Ползунок трёхцветный.

::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
border: 0px none #ffffff;
border-radius: 50px;
background-color: #81D4EC;
background-image: linear-gradient(182deg, #ED7B9C 32%, transparent 32%), linear-gradient(178deg, #EBEBEB 62%, transparent 62%);
}
::-webkit-scrollbar-thumb:active {
background: #DC143C;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-corner {
background: transparent;
}

 18. Ползунок в диагональную полоску.

::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
border: 0px none #ffffff;
border-radius: 0px;
background-image:
linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px),
linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px;
}
::-webkit-scrollbar-thumb:active {
background: #F0E68C;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
{

19. Ползунок в "сеточку". 

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #4d6600;
border: 0px none #ffffff;
border-radius: 50px;
background-image:
linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px),
linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px);
background-repeat: repeat;
background-size: 12px 14px, 12px 14px, 12px 11px;
background-position: 0 0, 0 0, 0 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #556B2F;
}
::-webkit-scrollbar-thumb:active {
background: #6B8E23;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
} 

20. Ползунок узорный.

::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
-ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% ),
linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.0) 25%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.0) 75% );
background-color: #900;
background-position: 0 0, 0 0, 80px 50px, 80px 50px;
-moz-background-size: 160px 50px, 160px 50px,160px 50px, 160px 50px;
background-size: 160px 50px, 160px 50px,160px 50px, 160px 50px;
}
::-webkit-scrollbar-thumb:active {
background: #B22222;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Готовые градиенты можно найти по ссылкам ниже.
https://freefrontend.com/css-background-patterns/
https://leaverou.github.io/css3patterns/#microbial-mat
https://habr.com/ru/post/315216/

Сделать узор самому, а код скопировать, можно здесь:
https://patternizer.com/uwte
https://www.colorzilla.com/gradient-editor/
https://www.css-gradient.com/
https://cssgradient.io/
https://www.css-gradient.com/
https://www.cssmatic.com/
https://css3gen.com/gradient-generator/
http://flatonika.ru/css-gradient-generator-onlajn/
http://angrytools.com/