AAtomic CSS

background-clip

배경이 칠해지는 영역을 제한합니다. bgct(text)는 배경을 텍스트 형태로 잘라내어 그라디언트 텍스트 효과를 만드는 매우 인기 있는 디자인 기법입니다.

클래스 목록

클래스CSS설명
bgcbbbackground-clip: border-boxborder 영역까지 배경 칠함 (기본값)
bgcpbbackground-clip: padding-boxpadding 영역까지만 배경 칠함
bgccbbackground-clip: content-boxcontent 영역에만 배경 칠함
bgctbackground-clip: text텍스트 형태로 배경을 잘라냄 (그라디언트 텍스트)

시각 데모

세 상자 모두 같은 배경색과 같은 8px 점선 테두리, 같은 안쪽 여백을 씁니다. 다른 것은 background-clip 값 하나뿐입니다. 점선 사이 틈으로 배경색이 비치는지 보면 배경이 어디까지 칠해졌는지 바로 알 수 있습니다.

bgcbb

content

점선 틈 사이로도 배경색이 보입니다. 테두리 아래까지 칠해진 상태입니다.

bgcpb

content

점선 틈이 비어 보입니다. 배경이 테두리 안쪽에서 끊깁니다.

bgccb

content

테두리와 안쪽 여백이 모두 비어 보입니다. 글자가 놓인 영역만 칠해집니다.

사용 예시

bgct를 사용하면 텍스트에 그라디언트나 이미지를 입힐 수 있습니다. color를 transparent로 설정해야 배경이 보입니다.

<!-- Gradient text effect -->
<h1 class="bgct bglg-to-r-6366F1-A855F7 fs4-8rem fw900">
  Gradient Text
</h1>

<!-- Background only up to padding area -->
<div class="bgcpb bg6366F1 p2rem b8pxdashed27272A">
  No background in the border area
</div>

<!-- Background only in content area -->
<div class="bgccb bg34D399 p2rem b8pxdashed27272A">
  Background only fills the content area
</div>

클래스별 상세

bgcbbbackground-clip: border-box

기본값입니다. 배경색과 배경 이미지가 테두리 영역 아래까지 깔립니다. 테두리가 불투명하면 차이가 드러나지 않지만, 점선이나 반투명 테두리를 쓰는 순간 틈으로 배경이 비칩니다.

<!-- Default: the fill runs under the border -->
<div class="bgcbb bg6366F1 b8pxdashed27272A br8px p2rem">
  The indigo shows through the dash gaps.
</div>

bgcpbbackground-clip: padding-box

배경을 테두리 안쪽에서 잘라냅니다. 점선, 파선, 반투명 테두리를 쓰는 카드에서 테두리가 지저분해 보이는 문제를 없앨 때 씁니다.

<!-- Dashed outline card that stays clean -->
<div class="bgcpb bg1E1E2E b2pxdashed27272A br8px p2rem">
  <p class="fs16px fw600 cFAFAFA">Drop files here</p>
  <p class="fs14px c71717A">The card fill stops at the border.</p>
</div>

bgccbbackground-clip: content-box

안쪽 여백까지 비우고 콘텐츠 영역만 칠합니다. 여백을 배경 없는 틈으로 남겨 이중 테두리처럼 보이게 하는 장식 효과에 씁니다.

<!-- Padding stays unpainted, giving a double-frame look -->
<div class="bgccb bg6366F1 b8pxdashed27272A br8px p2rem">
  <p class="fs14px cFFFFFF fw600">Only this line sits on the fill.</p>
</div>

bgctbackground-clip: text

배경을 글자 모양으로 잘라내 텍스트 안에 그라디언트나 이미지를 채웁니다. 반드시 배경 이미지와 투명한 글자색을 함께 지정해야 효과가 보입니다.

<!-- Needs BOTH a background image and a transparent text color -->
<h2 class="bgct bglg-to-r-6366F1-A855F7 fs4rem fw900">
  Ship faster
</h2>

<!-- Without the gradient the glyphs look like they disappeared -->

실전 예시 — 히어로 헤딩과 점선 카드

그라디언트 헤딩과 점선 테두리 카드를 함께 쓴 실제 화면 조각입니다. 헤딩에는 텍스트 클리핑을, 카드에는 패딩 박스 클리핑을 적용합니다.

<section class="py6rem tac">
  <h1 class="bgct bglg-to-r-6366F1-A855F7 fs5rem fw900 lh1-2 mb16px">
    Atomic CSS
  </h1>
  <p class="fs16px c71717A mb3-2rem">Utility classes, zero build step.</p>

  <div class="bgcpb bg1E1E2E b2pxdashed27272A br8px p2rem maxw40rem mxa">
    <p class="fs14px cFAFAFA fw600 mb4px">Try it in your project</p>
    <p class="fs14px c71717A">The dashed frame stays crisp because the card
       fill is clipped at the padding box.</p>
  </div>
</section>

팁 / 주의사항

투명한 글자색이 없으면 아무것도 안 보인다

bgct만 넣으면 불투명한 글자색이 잘려나간 배경을 그대로 덮습니다. 글자색을 투명하게 만들어야 배경이 드러납니다. 반대로 배경 이미지를 빼먹으면 글자가 통째로 사라진 것처럼 보입니다.

불투명 테두리에서는 차이가 없다

bgcpb는 점선, 파선, 반투명 테두리에서만 눈에 띕니다. 1px 실선 테두리라면 결과가 bgcbb와 구분되지 않습니다.

background-origin과 헷갈리지 말 것

clip은 칠한 배경을 어디서 잘라낼지 정하고, origin은 배경 이미지가 어디서부터 시작할지 정합니다. 배경색만 쓸 때는 origin이 아무 영향도 주지 않지만 clip은 영향을 줍니다.

그라디언트 텍스트는 선택과 접근성을 확인할 것

글자색이 투명하므로 강제 색상 모드나 고대비 모드에서 텍스트가 읽히지 않을 수 있습니다. 중요한 문구라면 대체 색상을 함께 준비하세요.

그라디언트 텍스트 패턴

bgct와 함께 background-image(그라디언트)를 설정하고, 텍스트 색상을 transparent로 지정하면 됩니다.

브라우저 호환성

bgct는 -webkit-background-clip: text가 필요할 수 있습니다. 최신 브라우저에서는 대부분 지원됩니다.

background-originbackground-sizebackground-positionbackground-repeatbackground-colorbackground