<main>
  <h1 data-after="wolkanca">lan bırak!</h1>
</main>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&display=swap");

body {
  text-align: center;
  background-color: lightgray;
  overflow: hidden;
  max-width: 100vh;
  padding: 1rem 0;
  margin: 0 auto;
}
main {
  position: relative;
  display: flex;
  height: 245px;
  max-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
  align-items: stretch;
}

h1 {
  text-indent: -999rem;
  text-transform: uppercase;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  letter-spacing: -2px;
  line-height: normal;
}

h1:after {
  text-indent: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  content: attr(data-after);
  font-size: 15vh;
  margin-top: 1rem;
  background-image: -webkit-linear-gradient(
    top,
    #7293b4,
    #fff 45%,
    #fff 49.9%,
    #50402d 50%,
    #cba355 55%,
    #cba355 60%,
    #fff 82.5%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #414f68;
  z-index: 100;
}
/* wolkanca.com.tr */
Run Pen

External CSS

  1. https://codepen.io/wolkanca/pen/wvgOPWb

External JavaScript

  1. https://codepen.io/wolkanca/pen/wvgOPWb