<![CDATA[ <head>
<meta charset = "utf-8">
<title> Linear Gradients </title>
<style type = "text/css">
.container > div {
flex: 0 0 33.333%;
height: 200px;
}
.container {
display: flex;
flex-wrap: nowrap;
}
#horizontal {
background: linear-gradient(to right, #002D72, #FFFFFF, #E81828,
#FFFFFF, #E81828, #FFFFFF, #E81828,
#FFFFFF, #002D72);
}
#vertical {
background: linear-gradient(to bottom, #F74902 15%, #000000 35%,
#FFFFFF 50%, #000000 65%, #F74902 85%);
}
#diagonal {
background: linear-gradient(to bottom right, #004C55 35%, #FFFFFF, #A5ACAF, #000000);
}
#combo {
height: 200px;
background: linear-gradient(to right, #002D72,
#FFFFFF00, #E81828, #FFFFFF00, #E81828,
#FFFFFF00, #E81828, #FFFFFF00, #002D72),
linear-gradient(to bottom, #F74902 15%, #000000 35%,
#FFFFFF00 50%, #000000 65%, #F74902 85%),
linear-gradient(to bottom right, #004C55 35%, #FFFFFF,
#A5ACAF, #000000);
}
</style>
</head>
<body>
<div class = "container">
<div id = "horizontal"></div>
<div id = "vertical"></div>
<div id = "diagonal"></div>
</div>
<div id = "combo"></div>
</body>
</html>
]]>