Как сделать двухцветный заголовок?

Question

Как сверстать на css такой двухцветный заголовок как на картинке?

.wrapper {
  z-index: -2;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(180deg, green 50%, white 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrp {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: url("https://mtdata.ru/u25/photo8028/20933786589-0/original.jpeg") center bottom no-repeat;
  background-size: cover;
}

p {
  text-align: center;
  font-size: 10vw;
  white-space: nowrap;
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="wrp"></div>
  <p>Семейное древо</p>
</div>

Answer 1

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(180deg, green 50%, white 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: url("https://mtdata.ru/u25/photo8028/20933786589-0/original.jpeg") center bottom no-repeat;
  background-size: cover;
}

.green {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 50vh;
  background: transparent;
}

.white {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 50vh;
  background: transparent;
}

p {
  z-index: 1;
  background: linear-gradient(180deg, white 50%, green 50%);
  text-align: center;
  font-size: 10vw;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="wrapper">
  <div class="wrp"></div>
  <p>Семейное древо</p>
  <div class="green"></div>
  <white class="white"></white>
</div>

БЛОГ НА HUSL

Как сделать двухцветный заголовок?

Ответы (1 шт):