테일윈드 v4 그라디언트 가이드

김현준·2025년 8월 20일

html/css

목록 보기

31/33

0. 한 장 요약(치트시트)

방향: bg-gradient-to-t | to-tr | to-r | to-br | to-b | to-bl | to-l | to-tl
색상 스탑: from-색, via-색(선택), to-색
투명도: from-black/70 처럼 / 뒤에 0 ~ 100 퍼센트
텍스트 그라디언트: bg-clip-text text-transparent
정밀 제어: bg-[linear-gradient(...)], bg-[radial-gradient(...)], bg-[conic-gradient(...)]
오버레이 패턴: relative + absolute inset-0 + pointer-events-none

1. CSS 그라디언트 기본 개념

그라디언트는 색이 연속적으로 변하는 배경 이미지이다. CSS에서 세 가지가 핵심이다.

linear-gradient() 선형
radial-gradient() 방사형
conic-gradient() 원뿔형

Tailwind는 이 CSS들을 유틸리티 클래스로 쉽게 쓰도록 래핑해준다. 기본은 bg-gradient-to-* 방향 + from/via/to 색상 스탑 조합이다.

2. 방향(Direction) 유틸리티

<div class="h-32 bg-gradient-to-r from-blue-500 to-purple-500"></div>  <!-- 오른쪽으로 -->
<div class="h-32 bg-gradient-to-b from-slate-900 to-slate-600"></div> <!-- 아래로 -->
<div class="h-32 bg-gradient-to-tr from-rose-500 to-amber-400"></div> <!-- 위-오른쪽 대각 -->

접미사 의미
- to-t 위로
- to-r 오른쪽
- to-b 아래
- to-l 왼쪽
- to-tr, to-br, to-bl, to-tl 대각선

3. 색상 스탑(Stops) 유틸리티

from-* 시작 색
via-* 중간 색(선택)
to-* 끝 색

<div class="h-32 bg-gradient-to-r from-indigo-500 via-sky-300 to-emerald-400"></div>

투명도 섞기

/ 뒤에 퍼센트로 불투명도를 주면 어두운 오버레이 등에 유용하다.

<div class="h-32 bg-gradient-to-t from-black/70 to-transparent"></div>

흔한 오타: form 아님, from 이다.
잘못된 예: to-50% 같은 클래스는 없다. 색 위치 퍼센트 제어는 임의값으로(아래 6장) 처리한다.

4. 실전: 이미지 위 그라디언트 오버레이

이미지를 어둡게 해 가독성을 올리거나, 하단만 진하게 만들 때 쓰는 패턴이다.

전체를 얇게 덮기

<figure className="relative">
  <img src="/images/scene.jpg" className="block w-full h-auto" alt="" />
  <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
</figure>

“하단만” 진하게

<figure className="relative">
  <img src="/images/scene.jpg" className="block w-full h-auto" alt="" />
  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-24
                  bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
</figure>

relative 부모 + absolute inset-* 자식이 기본 패턴이다
클릭 막힘을 피하려면 pointer-events-none을 붙인다
더 강하게: from-black/95
범위 조절: h-24 → h-32

4.1 왜 `inset-x-0 bottom-0` 인가

하단 전용 오버레이를 전폭으로, 바닥에 딱 붙여 깔기 위함이다.

absolute: 부모(relative) 기준 절대 배치
inset-x-0: left: 0; right: 0; 와 동일 → 가로 전폭
bottom-0: bottom: 0; → 부모의 바닥에 붙임
h-24 같은 높이를 주면 → 바닥에서부터 해당 높이만 차지

CSS로 풀면:

/* class: absolute inset-x-0 bottom-0 h-24 */
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6rem;

대안과 비교

left-0 bottom-0 w-full h-24 도 가능하지만, 절대 위치 요소는 상황에 따라 shrink-to-fit 규칙을 타서 너비 계산이 달라질 수 있다.
inset-x-0 은 양쪽 엣지에 고정하므로 틈 없이 안정적이다.
상단만 덮기 → inset-x-0 top-0 h-24
전체 덮은 뒤 하단 쪽만 페이드업 → absolute inset-0 bg-[linear-gradient(...)] 로 스톱을 아래쪽에 몰면 된다.

자주 놓치는 부분

부모에 relative 가 없으면 화면 기준으로 붙는다 → 부모에 relative 필수
모서리가 둥글면 오버레이가 삐져나올 수 있다 → overflow-hidden rounded-* 를 부모에 적용
오버레이가 클릭을 막으면 pointer-events-none
겹침 순서 문제는 z-10

5. 텍스트를 그라디언트로 보이게 하기

배경을 글자에만 클립하고 글자색을 투명으로 만든다.

<h1 class="text-5xl font-extrabold
           bg-gradient-to-r from-fuchsia-500 to-cyan-400
           bg-clip-text text-transparent">
  Gradient Title
</h1>

6. 정밀 제어: 임의값 그라디언트(Arbitrary Values)

색상 스탑 위치(예: 12 %, 35 %)까지 제어하려면 CSS 함수를 그대로 쓴다. Tailwind v4에서도 bg-[linear-gradient(...)] 같은 임의값 문법이 잘 동작한다. var(--tw-gradient-stops) 덕분에 from/via/to 유틸과 섞어 쓸 수 있다.

<!-- 아래 0 ~ 12 %는 진하게, 35 %에서 완전 투명 -->
<div class="h-40
            bg-[linear-gradient(to_top,_var(--tw-gradient-stops))]
            from-black/90 via-black/60 to-transparent
            [--tw-gradient-stops:rgba(0,0,0,0.9)_0%,rgba(0,0,0,0.6)_12%,rgba(0,0,0,0)_35%]">
</div>

포인트: 임의값에서는 쉼표와 공백을 _ 로 대체해야 할 때가 많다.
빌드가 특수문자를 싫어하면 _ 로 대체해 안전하게 사용한다.

Radial / Conic도 동일

<!-- Radial -->
<div class="h-40 rounded-xl
            bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]
            from-indigo-500 via-sky-300 to-transparent"></div>

<!-- Conic -->
<div class="h-40 rounded-xl
            bg-[conic-gradient(from_180deg_at_50%_50%,_var(--tw-gradient-stops))]
            from-pink-500 via-purple-500 to-yellow-400"></div>

7. 테일윈드 v4에서 색상 토큰 정의(브랜드 컬러)

v4는 CSS 우선 철학이라 @theme 안에 색을 등록해두고 쓰면 깔끔하다.

/* globals.css */
@theme {
  --color-brand: #7c3aed; /* violet-600 */
  --color-ink: #0b1020;
}

<div class="h-32 bg-gradient-to-r from-brand to-ink"></div>
<div class="h-32 bg-gradient-to-t from-brand/80 to-transparent"></div>

기존 CSS 변수도 그대로 사용 가능
from-[var(--my-start)] to-[var(--my-end)] 같은 형태가 자연스럽다

8. 보더를 그라디언트처럼 보이게 하는 트릭

진짜 border-color 그라디언트는 까다롭다. 바깥 래퍼에 그라디언트 배경 + 1px 패딩을 주고 안쪽을 흰색으로 채우는 트릭이 일반적이다.

<div class="p-[1px] rounded-2xl bg-gradient-to-r from-fuchsia-500 to-cyan-400">
  <div class="rounded-2xl bg-white p-6">
    내용
  </div>
</div>

9. 실전 레시피 모음

(1) 히어로 섹션 대각 그라디언트

<section class="py-24 text-white bg-gradient-to-br from-slate-900 to-slate-700">
  <div class="max-w-5xl mx-auto text-center">
    <h1 class="text-5xl font-bold">브랜드 타이틀</h1>
    <p class="mt-4 text-white/80">서브 카피</p>
  </div>
</section>

(2) 카드 상단만 살짝 페이드

<div class="relative rounded-xl overflow-hidden">
  <img src="/img.jpg" class="w-full h-auto" alt="" />
  <div class="pointer-events-none absolute inset-x-0 top-0 h-20
              bg-gradient-to-b from-black/45 to-transparent"></div>
</div>

(3) 섹션 경계 페이드(상단만 흐리게)

<div class="h-16 bg-[linear-gradient(to_top,_rgba(0,0,0,0.08),_transparent)]"></div>

(4) 카드 내부 콘텐츠 강조(좌 → 우)

<div class="p-6 rounded-2xl bg-gradient-to-r from-amber-50 to-white">
  콘텐츠
</div>

10. 디버깅 체크리스트

요소 크기: 그라디언트는 배경 이미지라 요소 높이·너비가 0이면 안 보인다 → h-*, w-* 확인
레이어 순서: 오버레이가 안 보이면 z-10을 오버레이에 추가하거나, 이미지가 더 위에 있는지 확인
투명도: to-transparent만으로는 약할 수 있다 → from-black/70처럼 시작 색 불투명도를 충분히 준다
오타: form → from, to-50% 같은 클래스는 없다
정밀 제어: 색상 스탑 위치 퍼센트 제어는 임의값 bg-[linear-gradient(...)]로 처리한다

11. Next.js + `<Image />`에서의 팁

Next.js next/image 위에 오버레이를 덮을 때도 동일하다. 부모를 relative로 두고 오버레이에 absolute inset-0를 주면 된다.

<figure className="relative">
  <Image
    src="/images/scene.jpg"
    alt="scene"
    width={1920}
    height={1080}
    className="w-full h-auto"
    priority
  />
  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-28
                  bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
</figure>

12. 성능과 접근성 메모

색상 토큰 통일: @theme로 브랜드 색을 정의해두면 일관성이 유지되고 유지보수가 쉬워진다
과도한 레이어 남발 금지: 중첩 오버레이는 페인트 비용이 늘 수 있다 → 하나의 linear-gradient로 해결 가능한지 먼저 고려
콘트라스트: 텍스트가 얹히는 경우, 그라디언트로 충분한 대비가 나오는지 확인한다

13. 자주 묻는 질문(FAQ)

Q. 텍스트에만 그라디언트를 적용하는 법
A. bg-clip-text text-transparent와 배경 그라디언트를 함께 쓴다(5장 참고).

Q. 색상 사이를 정확히 몇 퍼센트에서 바꾸고 싶다
A. 유틸리티만으로는 퍼센트 제어가 어렵다. bg-[linear-gradient(...)] 임의값을 사용한다(6장 참고).

Q. 이미지의 ‘최하단만’ 진하게 하고 싶다
A. 오버레이 높이를 제한한다(h-24 등). 더 매끄럽게 하려면 bg-[linear-gradient(...)]로 스톱 퍼센트를 직접 지정한다(4장, 6장 참고).

김현준

기록하자

이전 포스트

CSS 조건부 속성 정리

다음 포스트

테일윈드 v4 그라디언트 가이드

html/css

0. 한 장 요약(치트시트)

1. CSS 그라디언트 기본 개념

2. 방향(Direction) 유틸리티

3. 색상 스탑(Stops) 유틸리티

투명도 섞기

4. 실전: 이미지 위 그라디언트 오버레이

전체를 얇게 덮기

“하단만” 진하게

4.1 왜 `inset-x-0 bottom-0` 인가

대안과 비교

자주 놓치는 부분

5. 텍스트를 그라디언트로 보이게 하기

6. 정밀 제어: 임의값 그라디언트(Arbitrary Values)

Radial / Conic도 동일

7. 테일윈드 v4에서 색상 토큰 정의(브랜드 컬러)

8. 보더를 그라디언트처럼 보이게 하는 트릭

9. 실전 레시피 모음

(1) 히어로 섹션 대각 그라디언트

(2) 카드 상단만 살짝 페이드

(3) 섹션 경계 페이드(상단만 흐리게)

(4) 카드 내부 콘텐츠 강조(좌 → 우)

10. 디버깅 체크리스트

11. Next.js + `<Image />`에서의 팁

12. 성능과 접근성 메모

13. 자주 묻는 질문(FAQ)

CSS 조건부 속성 정리

디자인 px 단위를 반응형 %로 변환하는 공식

0개의 댓글

테일윈드 v4 그라디언트 가이드

html/css

0. 한 장 요약(치트시트)

1. CSS 그라디언트 기본 개념

2. 방향(Direction) 유틸리티

3. 색상 스탑(Stops) 유틸리티

투명도 섞기

4. 실전: 이미지 위 그라디언트 오버레이

전체를 얇게 덮기

“하단만” 진하게

4.1 왜 inset-x-0 bottom-0 인가

대안과 비교

자주 놓치는 부분

5. 텍스트를 그라디언트로 보이게 하기

6. 정밀 제어: 임의값 그라디언트(Arbitrary Values)

Radial / Conic도 동일

7. 테일윈드 v4에서 색상 토큰 정의(브랜드 컬러)

8. 보더를 그라디언트처럼 보이게 하는 트릭

9. 실전 레시피 모음

(1) 히어로 섹션 대각 그라디언트

(2) 카드 상단만 살짝 페이드

(3) 섹션 경계 페이드(상단만 흐리게)

(4) 카드 내부 콘텐츠 강조(좌 → 우)

10. 디버깅 체크리스트

11. Next.js + <Image />에서의 팁

12. 성능과 접근성 메모

13. 자주 묻는 질문(FAQ)

CSS 조건부 속성 정리

디자인 px 단위를 반응형 %로 변환하는 공식

0개의 댓글

4.1 왜 `inset-x-0 bottom-0` 인가

11. Next.js + `<Image />`에서의 팁