.linear-grad {
  background:linear-gradient(navy, skyblue, honeydew);
  height: 200px;
  width: 200px;
  margin: 10px;
}

.linear-grad-2 {
  background:linear-gradient(to right, navy, skyblue, honeydew);
    height: 200px;
  width: 200px;
  margin: 10px;
}

.linear-grad-3 {
  background:linear-gradient(to bottom right, navy, skyblue, honeydew);
    height: 200px;
  width: 200px;
  margin: 10px;
}

.radial-grad {
  background: radial-gradient(navy, skyblue, honeydew);
  height: 200px;
  width: 200px;
  margin: 10px;
}

.radial-grad-2 {
  background: radial-gradient(circle at top right, navy, skyblue, honeydew);
  height: 200px;
  width: 200px;
  margin: 10px;
}

.radial-grad-3 {
  background: radial-gradient(ellipse at left, navy, skyblue, honeydew);
  height: 200px;
  width: 200px;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-evenly;
  border-style: double;
}

p {
 color: white;
 text-shadow: 1px 1px 1px navy;
 font-weight: bold;
 font-family: "Trebuchet MS";
 text-align: center; 
}