<div class="hero">
  <h1 class="title">Bellos Tulipanes</h1>
</div>

* {
  box-sizing: border-box;
  margin: 0;
}

/* Styles */
body {
  background-color: #ffffdc;
}

.hero {
  height: 420px;
  padding: 32px;
  background-image: url("https://raw.githubusercontent.com/miguelquispe/miguelquispe.com/main/public/images/posts/css-text-gradient/tulip.png");
  background-repeat: no-repeat;
  background-position: center 110px;
}

.title {
  color: #fa4261;
  font-family: "Great Vibes", sans-serif;
  font-size: 86px;
  text-align: center; 
  color: transparent;
}

@supports (
  (-webkit-background-clip: text) or (-webkit-text-fill-color: transparent)
) {
  .title {
    background: linear-gradient(to right, #fa4261, #f39762, #d5aa10);
    background-size: cover;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
  }
}