가장자리로 갈 수록 폰트를 투명하게

박스의 가장자리로 갈 수록 폰트가 투명해지는 디자인이 자주 보인다.
CSS만으로 처리할 수 있다.

<div class="container">
  <div class="child"> ipsum dolor...optio odit?</div>
</div>

.container{
  padding: 1rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid black;
}
.child{
  width: 100%;
  height: 100%;
  overflow: clip;
  background: linear-gradient(
    180deg,
    black 0%,
    black 85%,
    transparent 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

다음 rule들의 합작으로 만들 수 있다.

• background-clip: text
• color: transparent
• background: linear-gradient()