Gradient

CSS 그라데이션 배경을 Atomic 클래스로 생성합니다. linear-gradient, radial-gradient, conic-gradient를 모두 지원하며, HEX·RGBA·transparent 색상과 위치 지정이 가능합니다.

패턴 분석

그라데이션 클래스는 접두사 + 방향/형태 + 색상들로 조합됩니다.

bg{type}-{direction}-{color1}-{color2}-...

부분	역할	예시
`bglg-`	linear-gradient 접두사	bglg-to-r-...
`bgrg-`	radial-gradient 접두사	bgrg-circle-...
`bgcg-`	conic-gradient 접두사	bgcg-from-0deg-...
`{direction}`	방향 또는 형태 (선택)	to-r, 45deg, circle, from-90deg
`{colors}`	색상 2개 이상 (필수)	FF0000-0000FF

Linear Gradient

bglg- 접두사를 사용합니다. 방향은 to-* 약어 또는 deg 단위로 지정합니다.

방향 약어

약어	CSS 방향
`to-t`	to top
`to-r`	to right
`to-b`	to bottom
`to-l`	to left
`to-tr`	to top right
`to-tl`	to top left
`to-br`	to bottom right
`to-bl`	to bottom left
`45deg`	45deg
`135deg`	135deg

사용 예시

클래스	CSS
`bglg-to-r-FF0000-0000FF`	background: linear-gradient(to right, #FF0000, #0000FF)
`bglg-to-br-000000-FFFFFF`	background: linear-gradient(to bottom right, #000000, #FFFFFF)
`bglg-45deg-FF0000-00FF00-0000FF`	background: linear-gradient(45deg, #FF0000, #00FF00, #0000FF)
`bglg-to-r-0-0-0-80-0-0-0-0`	background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0))
`bglg-to-r-FF0000-transparent-0000FF`	background: linear-gradient(to right, #FF0000, transparent, #0000FF)

Radial Gradient

bgrg- 접두사를 사용합니다. 형태는 circle 또는 ellipse를 지정할 수 있습니다.

클래스	CSS
`bgrg-circle-FF0000-0000FF`	background: radial-gradient(circle, #FF0000, #0000FF)
`bgrg-ellipse-FF0000-0000FF`	background: radial-gradient(ellipse, #FF0000, #0000FF)
`bgrg-FF0000-0000FF`	background: radial-gradient(#FF0000, #0000FF)

Conic Gradient

bgcg- 접두사를 사용합니다. 시작 각도는 from-Xdeg로 지정합니다.

클래스	CSS
`bgcg-from-0deg-FF0000-0000FF`	background: conic-gradient(from 0deg, #FF0000, #0000FF)
`bgcg-from-90deg-FF0000-00FF00-0000FF`	background: conic-gradient(from 90deg, #FF0000, #00FF00, #0000FF)
`bgcg-FF0000-00FF00-0000FF`	background: conic-gradient(#FF0000, #00FF00, #0000FF)

색상 형식

그라데이션 색상은 3가지 형식을 지원합니다.

형식	패턴	예시
HEX (6자리)	`FF0000`	#FF0000 (빨강)
RGBA	`R-G-B-A`	0-0-0-50 → rgba(0,0,0,0.5)
transparent	`transparent`	투명

색상 위치 지정

색상 뒤에 _위치를 붙여 color stop 위치를 지정할 수 있습니다.

클래스	CSS
`bglg-to-r-FF0000_50p-0000FF`	background: linear-gradient(to right, #FF0000 50%, #0000FF)
`bglg-to-r-FF0000_2rem-0000FF`	background: linear-gradient(to right, #FF0000 2rem, #0000FF)
`bglg-to-r-FF0000_1-5rem-0000FF`	background: linear-gradient(to right, #FF0000 1.5rem, #0000FF)
`bglg-to-r-FF0000_100px-0000FF`	background: linear-gradient(to right, #FF0000 100px, #0000FF)

코드 예시

<!-- 기본 수평 그라데이션 -->
<div class="bglg-to-r-6366F1-A855F7 h20rem br8px"></div>

<!-- 대각선 3색 그라데이션 -->
<div class="bglg-45deg-FF6B6B-4ECDC4-45B7D1 h20rem br8px"></div>

<!-- 이미지 위 어두운 오버레이 -->
<div class="pr h30rem oh br8px">
  <div class="pa t0 l0 w100p h100p bglg-to-b-0-0-0-0-0-0-0-80 zi10"></div>
  <img class="w100p h100p ofc" src="/hero.jpg" alt="">
  <h1 class="pa b2rem l2rem cFFFFFF zi20 fs3-6rem fw800">제목</h1>
</div>

<!-- 원형 그라데이션 배지 -->
<div class="bgrg-circle-6366F1-1E1E2E w8rem h8rem br50p df jcc aic">
  <span class="cFFFFFF fw700">NEW</span>
</div>

<!-- 코닉 그라데이션 (색상환) -->
<div class="bgcg-from-0deg-FF0000-FF8800-FFFF00-00FF00-0000FF-8800FF br50p w12rem h12rem"></div>

<!-- 호버 시 그라데이션 변경 -->
<button class="bglg-to-r-6366F1-A855F7 hover-bglg-to-r-A855F7-6366F1 cFFFFFF py12px px2-4rem br8px tall300msease">
  호버 효과
</button>

팁 & 주의사항

3색 이상 가능

색상을 하이픈으로 연결하면 3개 이상도 자유롭게 사용할 수 있습니다. 예: bglg-to-r-FF0000-00FF00-0000FF

RGBA로 반투명 그라데이션

bglg-to-b-0-0-0-0-0-0-0-80은 투명에서 반투명 검정으로 변하는 오버레이에 유용합니다.

그라데이션 텍스트

gradient 클래스와 bgct(background-clip: text)를 함께 사용하면 그라데이션 텍스트 효과를 만들 수 있습니다.

소수점 위치 지정

rem/em 위치에 소수점을 사용할 때는 하이픈을 소수점으로 씁니다. 예: FF0000_1-5rem → 1.5rem

background background-color colors animation