Collection of CSS gradients

A selection of 23 backgrounds with linear and radial gradients.

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
12.02.2019, updated 26.02.2021
150

Comments

to add a comment.

Other publications

Links to messengers from the site
HTML links to open chat and other functions of popular instant messengers.
40
0
CSS styles for horizontal lines
Collection of horizontal lines with hr tag of different types and styles.
60
0
Vertical alignment of text in a block
A way to vertically align text in blocks of fixed height. The text is wrapped in a tag with a .child class, followed by...
30
0
Heading with a horizontal line in the middle
One way to make a heading with a horizontal line in the center without an image (background-image).
52
0
The viewport meta tag
Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
34
0
Styling Checkbox
Here are some examples of how to change the look of checkboxes using CSS, images and some JS.
167
0