<div class="container">
  <header>
    <h1>Pastel Gradients</h1>
  </header>
<div class="box" id="g1">
  <p>Gradient 1</p>
</div>
  <div class="box" id="g2">
  <p>Gradient 2</p>
</div>
  <div class="box" id="g3">
  <p>Gradient 3</p>
</div>
  <div class="box" id="g4">
  <p>Gradient 4</p>
</div>
  <div class="box" id="g5">
  <p>Gradient 5</p>
</div>
  <div class="box" id="g6">
  <p>Gradient 6</p>
</div>
  <div class="box" id="g7">
  <p>Gradient 7</p>
</div>
  <div class="box" id="g8">
  <p>Gradient 8</p>
</div>
</div>

body {
  background: #faf5e6;
}

h1,
p {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #1d1d1d;
}

header{
margin: 40px;
}

.container {
  margin: 3% auto;
  background: white;
  border-radius: 15px;
}

.box {
  height: 100px;
  margin-bottom: 20px;
  border-radius: 15px;
}

.box p {
  line-height: 100px;
  font-size: 2em;
  color: white;
}

/* Gradient 1 */
#g1 {
  background: linear-gradient(90deg, #69b7eb, #b3dbd3, #f4d6db);
}

/* Gradient 2 */
#g2 {
  background: linear-gradient(90deg, #cfecd0, #ffc5ca);
}

/* Gradient 3 */
#g3 {
  background: linear-gradient(90deg, #f598a8, #f6edb2);
}

/* Gradient 4 */
#g4 {
  background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
}

/* Gradient 5 */
#g5 {
  background: linear-gradient(90deg, #b9deed, #efefef);
}

/* Gradient 6 */
#g6 {
  background: linear-gradient(90deg, #aea4e3, #d3ffe8);
}

/* Gradient 7 */
#g7 {
  background: linear-gradient(90deg, #faf0cd, #fab397);
}

/* Gradient 8 */
#g8 {
  background: linear-gradient(90deg, #cfecd0, #a0cea7, #9ec0db);
}