Не стандартный СSS градиент

Подборка необычных градиентов CSS3 показывающая все возможности linear-gradient.
1

В клетку

body {
	background-image: 
		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
		linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
	background-position: 0px 0px, 10px 10px;
	background-size: 20px 20px;        
}
CSS
body {
	background: 
		linear-gradient(90deg, transparent 50%, rgba(255,0,0, 0.6) 50%), 
		linear-gradient(0, transparent 49%, rgba(255,0,0, 0.6) 50%);
	background-size: 30px 30px;
}
CSS
body {
	background-blend-mode: multiply;  
	background: 
		repeating-linear-gradient(floralwhite, floralwhite 10px, lightcoral 10px, lightcoral 15px, floralwhite 15px, floralwhite 20px, lightcoral 15px, lightcoral 40px, floralwhite 40px, floralwhite 45px, lightcoral 45px, lightcoral 50px, floralwhite 50px, floralwhite 80px),
		repeating-linear-gradient(90deg, floralwhite, floralwhite 10px, lightcoral 10px, lightcoral 15px, floralwhite 15px, floralwhite 20px, lightcoral 15px, lightcoral 40px, floralwhite 40px, floralwhite 45px, lightcoral 45px, lightcoral 50px, floralwhite 50px, floralwhite 80px);
}
CSS
body {
	background:
		linear-gradient(90deg, rgba(204,204,204, 0) 48%, rgb(255,255,255) 48%, rgb(255,255,255) 50%, rgba(204,204,204, 0) 50%, rgba(204,204,204, 0) 100%),
		linear-gradient(0, #3498db 48%, rgb(255,255,255) 48%, rgb(255,255,255) 50%, #3498db 50%, #3498db 100%);
	background-size: 30px 30px;
}
CSS
body {
	background-color: #58a;
	background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
	background-image: 
		linear-gradient(hsla(0,0%,100%, 0.3) 1px, transparent 0), 
		linear-gradient(90deg, hsla(0,0%,100%, 0.3) 1px, transparent 0),
		linear-gradient(white 2px, transparent 0),
		linear-gradient(90deg, white 2px, transparent 0);
}
CSS
body {
	background-color: #000;
	background-image: 
		repeating-linear-gradient(transparent, transparent 50px, rgba(0,255,255, .25) 50px, rgba(0,255,255, .25) 100px), 
		repeating-linear-gradient(90deg, rgba(0,255,255, .25), rgba(0,255,255, .25) 50px, transparent 50px, transparent 100px),
		repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px),
		repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.1) 4px, rgba(255,255,255,.1) 8px),
		repeating-linear-gradient(transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px, transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px),
		repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(100,250,250, .2) 20px, rgba(100,250,250, .2) 21px, transparent 21px, transparent 29px, rgba(100,250,250, .2) 29px, rgba(100,250,250, .2) 30px, transparent 30px, transparent 50px);
}
CSS
2

Линии

body {
	background: repeating-linear-gradient(135deg, black, black .25em, #0092b7 0, #0092b7 .75em);
}
CSS
body {
	background: repeating-linear-gradient(45deg, rgba(171,0,0, 0.6) 10px, transparent 10px, transparent 20px, rgba(0,186,255, 0.6) 20px, rgba(0,186,255, 0.6) 30px, transparent 30px, transparent 40px, rgba(10,53,10, 0.6) 40px, rgba(10,53,10,0.6) 50px, transparent 50px, transparent 60px, rgba(191,128,12, 0.6) 60px, rgba(191,128,12, 0.6) 70px, transparent 70px, transparent 80px, rgba(165,165,28, 0.6) 80px, rgba(165,165,28, 0.6) 90px, transparent 90px);    
}
CSS
body {
	background-image: repeating-linear-gradient(-45deg, #777 20px, #888 40px, hsla(300,50%,50%, .9) 50px);
}
CSS
body {
	background-image: repeating-linear-gradient(to top right, rgba(255,165,0, .8) 5%, khaki 10%, plum 15%);
}
CSS
body {
	background-image: repeating-linear-gradient(-45deg, red 0, red 10px, green 10px, green 20px);
}
CSS
body {
	background-image: repeating-linear-gradient(45deg, yellow 0, yellow 10px, #000 10px, #000 20px);
}
CSS
body {
	background: linear-gradient(135deg, #333333 25%, rgba(51,51,51, 0.5) 25%, rgba(51,51,51, 0.5) 50%, #333333 50%, #333333 75%, rgba(51,51,51, 0.5) 75%);
	background-color: gray;
	background-size: 32px 32px;
}
CSS
body {
	background: linear-gradient(150deg, #ffa500 25%, rgba(255,165,0, 0.5) 25%, rgba(255,165,0, 0.5) 50%, #ffa500 50%, #ffa500 75%, rgba(255,165,0, 0.5) 75%);
	background-color: gray;
	background-size: 32px 18.4px;
}
CSS
body {
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255, 0.5), rgba(255,255,255, 0.5) 10px, white 10px, white 20px);
	background-color: gray;
}
CSS
body {
	background: linear-gradient(135deg, rgba(108,188,99, 0.25) 25%, rgba(108,188,99, 0.34) 25%, rgba(108,188,99, 0.34) 50%, rgba(108,188,99, 0.25) 50%, rgba(108,188,99, 0.25) 75%, rgba(108,188,99, 0.34) 75%);
	background-color: #fafafa;
	background-size: 5rem 5rem;
}
CSS
body{
	background-color: #d8dbe2;
	background-image: 
		repeating-radial-gradient(circle at 0 100%, rgba(27,27,30, 0.1), rgba(88,164,176, 0.15) 1px, rgba(216,219,226, 0.2) 2px, rgba(88,164,176, 0.15) 3px, rgba(27,27,30, 0.1) 4px), 
		radial-gradient(circle at 0 100%, #1b1b1e, #373f51, #58a4b0, #a9bcd0, #d8dbe2);
}
CSS
body {
	background-color: #6d6875;
	background-image: 
		linear-gradient(135deg, rgba(109,104,117, 0.2) 0%, rgba(255,180,162, 0.1) 25%, rgba(109,104,117, 0.2) 50%, rgba(255,180,162, 0.1) 75%, rgba(109,104,117, 0.2) 100%), 
		linear-gradient(90deg, #6d6875, #b5838d, #e5989b, #ffb4a2, #ffcdb2);
	background-size: 6px 6px, 100%;
}
CSS
body {
	background-color: #303641;
	background-image: 
		linear-gradient(135deg, rgba(0,0,0, 0.2) 0%, rgba(0,0,0, 0.1) 25%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.1) 75%, rgba(0,0,0, 0.2) 100%), 
		linear-gradient(90deg, #192129, #303641, #484e57);
	background-size: 8px 8px, 100%;
}
CSS
body {
	background-color: #026873;
	background-image: 
		linear-gradient(90deg, rgba(255,255,255, 0.07) 50%, transparent 50%), 
		linear-gradient(90deg, rgba(255,255,255, 0.13) 50%, transparent 50%), 
		linear-gradient(90deg, transparent 50%, rgba(255,255,255, 0.17) 50%),
		linear-gradient(90deg, transparent 50%, rgba(255,255,255, 0.19) 50%);
	background-size: 13px, 29px, 37px, 53px;
}
CSS
3

Паттерны

body {
	background-color: #62bbd3;
	background-image: 
		linear-gradient(30deg, #80c9dd 12%, transparent 12.5%, transparent 87%, #80c9dd 87.5%, #80c9dd),
		linear-gradient(150deg, #80c9dd 12%, transparent 12.5%, transparent 87%, #80c9dd 87.5%, #80c9dd),
		linear-gradient(30deg, #80c9dd 12%, transparent 12.5%, transparent 87%, #80c9dd 87.5%, #80c9dd),
		linear-gradient(150deg, #80c9dd 12%, transparent 12.5%, transparent 87%, #80c9dd 87.5%, #80c9dd),
		linear-gradient(60deg, #d5eaf0 25%, transparent 25.5%, transparent 75%, #d5eaf0 75%, #d5eaf0),
		linear-gradient(60deg, #d5eaf0 25%, transparent 25.5%, transparent 75%, #d5eaf0 75%, #d5eaf0);
	background-size: 40px 70px;
	background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}
CSS
body {
	background-color: pink;
	background-image: radial-gradient(white 20%, transparent 0), radial-gradient(white 20%, transparent 0);
	background-size: 30px 30px;
	background-position: 0 0, 15px 15px;
}
CSS
body {
	background: 
		radial-gradient(circle at 25% 25%, #CE0042 10%, rgba(0,0,0, 0) 15%), 
		radial-gradient(circle at 75% 75%, #CE0042 10%, rgba(0,0,0, 0) 15%);
	background-size: 20px 20px;
}
CSS
body {
	background: 
		linear-gradient(135deg, #BBF 25%, transparent 25%) -50px 0, 
		linear-gradient(225deg, #BBF 25%, transparent 25%) -50px 0, 
		linear-gradient(315deg, #BBF 25%, transparent 25%), 
		linear-gradient(45deg, #BBF 25%, transparent 25%);
	background-size: 25px 25px;
}
CSS
body {
	background: repeating-radial-gradient(circle at 50% 50%, #386AD8 4%, #386AD8 7%, transparent 12%);
	background-size: 48px 50px;
}
CSS
body {
	background: repeating-radial-gradient(circle at 50% 50%, transparent 15%, #D2006A 18%,#D2006A 23%, transparent 22%);
	background-size: 25px 50px;
}
CSS
body {
	background: repeating-radial-gradient(transparent 0, transparent 40%, white 40%, white 41%) center center/2em 2em, #99DFD7;
}
CSS
body{
	background-color: #f3a183;
	background-image: 
		linear-gradient(transparent 0px, transparent 49px, rgba(255,255,255, 0.2) 50px, transparent 51px, transparent 99px, rgba(255,255,255, 0.2) 100px), 
		linear-gradient(120deg, transparent 0, transparent 48px, rgba(255,255,255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255,255,255, 0.2) 99px, transparent 100px), 
		linear-gradient(60deg, transparent 0, transparent 48px, rgba(255,255,255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255,255,255, 0.2) 99px, transparent 100px), 
		linear-gradient(90deg, #f3a183, #eC6f66);
	background-size: 100px 100px, 115px 100px, 115px 100px, auto;
}
CSS
4

Узоры

body {
	background: 
		repeating-linear-gradient(50deg, #F7A37B, #F7A37B 1em, #FFDEA8 1em, #FFDEA8 2em, #D0E4B0 2em, #D0E4B0 3em, #7CC5D0 3em, #7CC5D0 4em, #00A2E1 4em, #00A2E1 5em, #0085C8 5em, #0085C8 6em), 
		repeating-linear-gradient(-50deg, #F7A37B, #F7A37B 1em, #FFDEA8 1em, #FFDEA8 2em, #D0E4B0 2em, #D0E4B0 3em, #7CC5D0 3em, #7CC5D0 4em, #00A2E1 4em, #00A2E1 5em, #0085C8 5em, #0085C8 6em);
	background-blend-mode: multiply;
}
CSS
body {
	background: 
		radial-gradient(transparent 0, transparent 2em, lightblue 2em, lightblue 2.5em, transparent 2.5em, transparent 100%), 
		radial-gradient(transparent 0, transparent 2em, aquamarine 2em, aquamarine 2.5em, transparent 2.5em, transparent 100%), 
		radial-gradient(transparent 0, transparent 2em, khaki 2em, khaki 2.5em, transparent 2.5em, transparent 100%), 
		radial-gradient(transparent 0, transparent 2em, pink 2em, pink 2.5em, transparent 2.5em, transparent 100%), 
		linen;
	background-blend-mode: multiply;
	background-size: 5em 5em;
	background-position: 0 2.5em, 2.5em 0, 2.5em 2.5em, 0 0;
}
CSS
body {
	background: 
		radial-gradient(at bottom right, dodgerblue 0, dodgerblue 1em, lightskyblue 1em, lightskyblue 2em, deepskyblue 2em, deepskyblue 3em, gainsboro 3em, gainsboro 4em, lightsteelblue 4em, lightsteelblue 5em, deepskyblue 5em, deepskyblue 6em, lightskyblue 6em, lightskyblue 7em, transparent 7em, transparent 8em),
		radial-gradient(at top left, transparent 0, transparent 1em, lightskyblue 1em, lightskyblue 2em, deepskyblue 2em, deepskyblue 3em, lightsteelblue 3em, lightsteelblue 4em, gainsboro 4em, gainsboro 5em, deepskyblue 5em, deepskyblue 6em, skyblue 6em, skyblue 7em, dodgerblue 7em, dodgerblue 8em, transparent 8em, transparent 20em),
		radial-gradient(circle at center bottom, coral, darkslateblue);
	background-blend-mode: overlay;
	background-size: 8em 8em, 8em 8em, cover;
}
CSS
body {
	background: 
		repeating-linear-gradient(-45deg, transparent, transparent 25%, tomato 0, tomato 50%),
		repeating-linear-gradient(45deg, transparent, transparent 25%, dodgerblue 0, dodgerblue 50%),
		wheat;
	background-size: 10em 10em;
	background-blend-mode: multiply;
}
CSS
body {
	background: 
		linear-gradient(45deg, rgba(171,0,0, 0.6) 10%, transparent 10%, transparent 20%, rgba(0,186,255, 0.6) 20%, rgba(0,186,255, 0.6) 30%, transparent 30%, transparent 40%, rgba(10,53,10,0.6) 40%, rgba(10,53,10, 0.6) 50%, transparent 50%, transparent 60%, rgba(191,128,12, 0.6) 60%, rgba(191,128,12, 0.6) 70%, transparent 70%, transparent 80%, rgba(165,165,28, 0.6) 80%, rgba(165,165,28, 0.6) 90%, transparent 90%, transparent 100%),
		linear-gradient(135deg, rgba(171,0,0, 0.6) 10%, transparent 10%, transparent 20%, rgba(0,186,255, 0.6) 20%, rgba(0,186,255, 0.6) 30%, transparent 30%, transparent 40%, rgba(10,53,10,0.6) 40%, rgba(10,53,10, 0.6) 50%, transparent 50%, transparent 60%, rgba(191,128,12, 0.6) 60%, rgba(191,128,12, 0.6) 70%, transparent 70%, transparent 80%,rgba(165,165,28, 0.6) 80%, rgba(165,165,28, 0.6) 90%, transparent 90%, transparent 100%);
}
CSS
body {
	background: 
		linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
		linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
		linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
		linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
	background-size: 100px 100px;
	background-color: #EC173A;
}
CSS
02.07.2019, обновлено 16.09.2019 238
Предыдущая запись Сборник CSS градиентов
Следующая запись Фильтры Instagram на CSS

Поделится

Темы

Градиент

Другие публикации

В статье представлены способы зафиксировать блок при прокрутки страницы с примерами для горизонтального меню и баннера...
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
В продолжении первой части, примеры как добавить стрелки к блоку с рамкой. Используются оба псевдо-элемента :before и...
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
::selection – псевдоэлемент который отвечает за стили выделяемой области текста. Для более старых версий Firefox...