Linjär övertoning (linear-gradient)

Box 1

#box1 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(0deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00));
}

Box 2

#box2 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(180deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00));
}

Box 3

#box3 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(270deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00))
}

Box 4

#box4 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(90deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00));
}

Box 5

#box5 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(335deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00));
}

Box 6

#box6 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(45deg, rgba(255,255,255, 1.00),
rgba(255,0,0,1.00));
}

Box 7

#box7 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(225deg, rgba(255,255,255, 1.00),
rgba(255,0,0, 1.00));
}

Box 8

#box8 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient
(135deg, rgba(255,255,255, 1.00),
rgba(255,0,0,1.00));
}