[CSS] 텍스트(text)에 배경색(background) 적용

텍스트에 배경색 클리핑 마스크(clipping mask) 적용

[html]

<h2>Clipping Mask</h2>

<section>

  <div>

    <p class="p01">BACKGROUND</p>

  </div>

  <div>

    <p class="p02">BACKGROUND</p>

  </div>

</section>

 

[css]

* { margin: 0; padding: 0; }

h2 {

  /* 배경 그라데이션 */

  background: rgb(34,193,195);

  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

  text-align: center;

  /* 텍스트에 배경색 적용 */

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

}

section {

  display: grid;

  grid-template-columns: repeat(2,1fr);

  width: 100%;

}

div {

  position: relative;

  height: 68px;

  overflow: hidden;

}

p {

  position: absolute;

  top: 0;

  font-size: 60px;

  font-weight: 700;

  line-height: 1;

  color: transparent;

}

.p01 {

  right: 0;

  transform: translateX(50%);

  background: rgb(34,193,195);

  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

  background-clip: text;

  -webkit-background-clip: text;

}

.p02 {

  left: 0;

  transform: translateX(-50%);

  background: rgb(131,58,180);

  background: linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);

  background-clip: text;

  -webkit-background-clip: text;

}

 

See the Pen [CSS] background clip text _ 텍스트에 배경색 적용 by j. sik (@jsik) on CodePen.