Advance Css3 property background gradient. How does it works? - css

Question

I am taking a very popular example from here. I want to understand how these patterns are being generated from gradient properties. I have just taken and compiled few examples below. Need to understand how to pass thing in gradient property so I can generate my own patterns.
.pattern {
height: 100px
}
.pattern1 {
background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
background-size: 20px 20px;
}
.pattern2 {
background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444;
background-size: 16px 48px;
}
.pattern3 {
background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%) 50px 50px;
background-color: #b03;
background-size: 100px 100px;
}
.pattern4 {
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;
}
<div class="pattern1 pattern"></div>
<div class="pattern2 pattern"></div>
<div class="pattern3 pattern"></div>
<div class="pattern4 pattern"></div>

Answer 1

If you want to understand how each pattern is built, you should deconstruct it by making it bigger (4x in following example) and replace each color by a distinct and more visible one.
Below, for the second pattern, I replaced background-color #444 by transparent at the end of line (tomato wasn't as clear) and replaced each occurence of #999 by a random color like blue, red, etc.
EDIT: and added a new line after each comma. One *-gradient per line shows there are 3 of them and a background-color.
.pattern {
height: 192px;
}
.pattern2 {
background: linear-gradient(63deg, red 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, blue 78%),
linear-gradient(63deg, transparent 34%, darkgreen 38%, #999 58%, transparent 62%),
transparent;
background-size: 64px 192px;
}
<div class="pattern2 pattern"></div>