Gradient

Canvas gradient는 영역 배경에 사용하는 그라데이션입니다. 별도 스타일시트에서 --gradient-canvas CSS 변수를 제공합니다.

미리보기

Light
Dark

방향

그라데이션은 영역의 왼쪽 위에서 오른쪽 아래로 이어집니다. 가로세로 비율에 따라 각도가 달라지므로, 크기와 관계없이 같은 방향을 유지하려면 제공된 변수를 그대로 사용합니다.

적용 방법

기본 토큰과 gradient-canvas.css를 불러온 뒤, background-image에 var(--gradient-canvas)를 적용합니다.

@import '@mbsw/tokens/styles.css';
@import '@mbsw/tokens/gradient-canvas.css';

.canvas {
  min-height: 240px;
  background-image: var(--gradient-canvas);
}

요소나 상위 요소에 .dark 클래스를 적용하면 다크 그라데이션으로 전환됩니다. 테마 설정은 테마와 스타일에서 확인하세요.