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

12.02.2019

77316

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

1:

body {
	background: linear-gradient(90deg, #f598a8, #f6edb2);
}

CSS

2:

body {
	background: linear-gradient(90deg, #faf0cd, #fab397);
}

CSS

3:

body {
	background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}

CSS

4:

body {
	background: linear-gradient(90deg, #cfecd0, #ffc5ca);
}

CSS

5:

body {
	background: linear-gradient(90deg, #b9deed, #efefef);
}

CSS

6:

body {
	background: linear-gradient(90deg, #aea4e3, #d3ffe8);
}

CSS

7:

body {
	background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
}

CSS

8:

body {
	background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
}

CSS

9:

body {
	background: linear-gradient(85deg, #fb63f9, #c2e534);
}

CSS

10:

body {
	background: linear-gradient(21deg, #dd03e4, #5611ec);
}

CSS

11:

body {
	background: linear-gradient(4deg, #5462c3, #ba872c);
}

CSS

12:

body {
	background: linear-gradient(81deg, #ddb35f, #7409c7);
}

CSS

13:

body {
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}

CSS

14:

body {
	background: linear-gradient(3deg, #e6d16c, #16014c);
}

CSS

15:

body {
	background: linear-gradient(66deg, #e38010, #1535bf);
}

CSS

16:

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

17:

body {
	background-blend-mode: screen;
	background:
		linear-gradient(limegreen, transparent),
		linear-gradient(90deg, skyblue, transparent),
		linear-gradient(-90deg, coral, transparent);
}

CSS

18:

body {
	background: linear-gradient(#c6e4ee 0%, #c6e4ee 40%, #fed1ae 60%, #faa0b9 70%, #cb7dcb 80%, #757ecb 100%);
}

CSS

19:

body {
	background: linear-gradient(to right, #f00, #ffa500, #ff0, #008000, #00f, #4b0082, #ee82ee);
}

CSS

20:

body {
	background: linear-gradient(to bottom, #b721ff, #2af598, #fec051, #fee140, #fa709a);
}

CSS

21:

body {
	background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
}

CSS

22:

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

23:

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