<div>
  <p>Linear Gradient</p>
</div>
<div>
  <p>Radial Gradient</p>
</div>
<div>
  <p>Conic Gradient</p>
</div>

div:nth-of-type(1) {
  background: linear-gradient(red, tomato, yellow);
}

div:nth-of-type(2) {
  background: radial-gradient(red, tomato, yellow);
}

div:nth-of-type(3) {
  background: conic-gradient(red, tomato, yellow);
}

/* Other Styles */

div {
  width: max(200px, 10vw);
  aspect-ratio: 1;
}

div p {
  font-weight: bold;
  margin-top: 100%;
  text-align: center;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(20px, 5vw);
  flex-wrap: wrap;
  background: tan;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
}