CSS로 텍스트 채워지는 효과, background-clip으로 구현하는 방법은?

CSS 25.07.08

CSS로 텍스트 채워지는 효과, background-clip으로 구현하는 방법은?

가장 간단하고 인상적인 글자 채우기 효과는 background-clip: text와 text-fill-color: transparent 조합으로 구현할 수 있습니다.

이 방법은 배경이 글자 모양대로 잘려 나가면서 글자가 채워지는 느낌을 줍니다.

➰➰➰

✨ 기본 개념

background-clip: text

글자 모양대로 배경을 잘라냅니다.

text-fill-color: transparent

글자 자체의 색상을 투명하게 처리합니다.

background-size, background-position

배경의 이동/확대 등을 통해 애니메이션 가능

text-fill-color: transparent

✏️ HTML 구조는 이렇게 생겼어요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="link aos-init aos-animate" data-aos="fade-up">
        <ul class="inner">
            <li>
                <a href="">
                    <h3>개인참가신청</h3>
                    <span>1인 참가자인 경우, 개인 참가로 신청해주세요.</span>
                </a>
            </li>
            <li>
                <a href="">
                    <h3>단체참가신청</h3>
                    <span>2명 이상 함께 참가하시는 경우, 단체 신청을 이용해주세요.</span>
                </a>
            </li>
            <li>
                <a href="">
                    <h3>참가신청조회</h3>
                    <span>참가 신청 내역을 확인할 수 있습니다.</span>
                </a>
            </li>
        </ul>
    </div>
Colored by Color Scripter
cs

✏️ css로 효과 구현하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.link {
    padding: 80px 0;
    background: #f5f5f5
}
.link .inner {
    display: flex;
    justify-content: center;
    gap: 100px;
    width: var(--main-size);
    margin: 0 auto;
    text-align: center
}
.link a h3 {
    margin-bottom: 15px;
    font-size: 50px;
    font-weight: 700;
    background-image: linear-gradient(0deg, #111 0%, #111 50%, transparent 50.1%);
    background-position: 100% 100%;
    background-size: 100% 0%;
    -webkit-text-stroke-color: #111;
    -webkit-text-stroke-width: 1px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    transition: all 0.5s cubic-bezier(.4,0,.2,1);
}
.link a span {
    font-size: 16px;
    font-weight: 500;
    color: #777
}
.link a:hover h3 {
    background-size: 100% 200%
}
Colored by Color Scripter
cs

✅ 글씨 채워지는 효과의 주요 장점

시각적 임팩트

정적인 텍스트보다 눈에 띄어 사용자의 주목을 끌기 좋습니다.

브랜드 강화

슬로건, 캠페인 문구, 타이틀 등에 감성적·역동적 연출이 가능해 브랜드 이미지 강화에 효과적입니다.

애니메이션 활용 가능

스크롤, hover, 타이밍 트리거 등과 연동해 동적 인터랙션 연출이 가능합니다.

심플한 구조로 구현 가능

background-clip, text-fill-color 등 몇 줄의 CSS로도 충분히 구현할 수 있어 성능에 부담을 주지 않습니다.

다양한 배경 활용

그라디언트, 이미지, 동영상, GIF 등을 배경으로 활용할 수 있어 확장성이 뛰어납니다.

모던한 감성

최신 웹 트렌드에 부합하며, 세련된 디자인을 선호하는 사이트에 잘 어울립니다.

See the Pen background-size by designkits (@designkits) on CodePen.

블로그 전체목록

최근 포스트