Поиск

Сборник CSS градиентов

Подборка 22-х фонов с линейным и радиальным градиентом.

body {
	background: linear-gradient(90deg, #f598a8, #f6edb2);
}
CSS
body {
	background: linear-gradient(90deg, #faf0cd, #fab397);
}
CSS
body {
	background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}
CSS
body {
	background: linear-gradient(90deg, #cfecd0, #ffc5ca);
}
CSS
body {
	background: linear-gradient(90deg, #b9deed, #efefef);
}
CSS
body {
	background: linear-gradient(90deg, #aea4e3, #d3ffe8);
}
CSS
body {
	background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
}
CSS
body {
	background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
}
CSS
body {
	background: linear-gradient(85deg, #fb63f9, #c2e534);
}
CSS
body {
	background: linear-gradient(21deg, #dd03e4, #5611ec);
}
CSS
body {
	background: linear-gradient(4deg, #5462c3, #ba872c);
}
CSS
body {
	background: linear-gradient(81deg, #ddb35f, #7409c7);
}
CSS
body {
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}
CSS
body {
	background: linear-gradient(3deg, #e6d16c, #16014c);
}
CSS
body {
	background: linear-gradient(66deg, #e38010, #1535bf);
}
CSS
body {
	background: 
		linear-gradient(rgba(135, 60, 255, 0.4), rgba(135, 60, 255, 0.0) 80%),
		linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(255, 160, 65, 0.9) 75%);
}
CSS
body {
	background-blend-mode: screen;
	background:
		linear-gradient(limegreen, transparent),
		linear-gradient(90deg, skyblue, transparent),
		linear-gradient(-90deg, coral, transparent);
}
CSS
body {
	background: linear-gradient(#c6e4ee 0%, #c6e4ee 40%, #fed1ae 60%, #faa0b9 70%, #cb7dcb 80%, #757ecb 100%);
}
CSS
body {
	background: linear-gradient(to right, #f00, #ffa500, #ff0, #008000, #00f, #4b0082, #ee82ee);
}
CSS
body {
	background: linear-gradient(to bottom, #b721ff, #2af598, #fec051, #fee140, #fa709a);
}
CSS
body {
	background: 
		radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #FDB931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%),
		radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
CSS
body {
	background-blend-mode: screen;
	background-blend-mode: multiply;
	background-blend-mode: overlay;
	background-blend-mode: darken;
	background-blend-mode: soft-light;
	background-blend-mode: luminosity;	
	background:
		linear-gradient(red, transparent),
		linear-gradient(to top left, lime, transparent),
		linear-gradient(to top right, blue, transparent);
}
CSS
12.02.2019, обновлено 26.09.2019 1332
Предыдущая запись Фильтры Instagram на CSS
Следующая запись Не стандартный СSS градиент

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

Примеры защиты от копирования текста с сайта, добавление копирайта при копировании и отключение выделения текста в...
19.12.2016 2687
Сборник советов как поднять оценку в PageSpeed Insights.
04.04.2019 1374
Сборник горизонтальных линий с тегом hr разных видов и стилей.
04.09.2018 6826
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
02.02.2018 22325
Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».
12.11.2017 3595
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
31.08.2018 101