• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 텍스트 그라데이션

텍스트에 그라데이션을 적용하면, 단순한 글자에 색다른 효과를 주어 시각적으로 더 매력적인 디자인을 만들 수 있습니다. 이 방법을 통해 글자에 여러 색상이 자연스럽게 연결되도록 만들 수 있습니다. 이번 예제에서는 두 가지 방식으로 텍스트에 그라데이션을 적용해보겠습니다.

단순한 그라데이션 배경이 있는 텍스트

.CSS_텍스트박스1 {
	background: rgb(34,193,195); /* <https://cssgradient.io> 에서 검색하기 */ 
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

이 코드에서 linear-gradient를 사용하여 텍스트 배경에 그라데이션을 적용했습니다. 이 경우 텍스트가 이 배경 위에 놓여 있기 때문에, 글자 배경이 그라데이션으로 보이게 됩니다. 결과적으로, 글자는 하나의 고정된 색상을 가지고 있지만, 배경 덕분에 그라데이션 효과가 있는 것처럼 보입니다.

텍스트 자체에 그라데이션을 적용

.CSS_텍스트박스2 {
	background: rgb(34,193,195); /* <https://cssgradient.io> 에서 검색하기 */ 
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

	background-clip: text;
	color: transparent;
}

이 예제에서는 background-clip: text;와 color: transparent; 속성을 추가로 사용했습니다. 이 속성들이 중요한 이유는 다음과 같습니다:

• background-clip: text;: 배경 이미지를 글자 영역에만 클립(자르기)하여 적용합니다. 즉, 배경이 글자 부분에만 나타나게 하는 역할을 합니다.
• color: transparent;: 글자 자체의 색상을 투명하게 만들어 배경의 그라데이션이 글자 안에서만 보이도록 합니다.

이 방식으로, 글자 자체가 그라데이션 효과를 가지게 되며, 배경이 아닌 텍스트 내부에서 그라데이션이 발생하는 듯한 효과를 줄 수 있습니다.

MDN background-clip 참고

📝 실습 코드