.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;
}