CSS 그라디언트 생성기

사용법

유형을 고르고 색 정지점을 넣으면 CSS가 만들어집니다. linear는 정해진 방향으로 곧게, radial은 가운데에서 바깥으로, conic은 시곗바늘처럼 원을 따라 색이 돕니다. 각도는 linear와 conic에서만 쓰입니다.

각 정지점의 위치는 0~100% 사이의 값입니다. 비워 두면 브라우저가 정지점들을 고르게 나눠 배치합니다. 위치를 직접 지정하면 색이 바뀌는 지점을 정확히 잡을 수 있고, 두 정지점을 같은 위치에 두면 그라디언트가 아니라 딱 잘린 경계가 됩니다.

반복을 켜면 repeating-이 붙어 마지막 정지점 다음에 같은 무늬가 계속 이어집니다. 줄무늬나 패턴을 만들 때 씁니다. 이때는 마지막 정지점의 위치를 100%보다 작게 둬야 반복이 눈에 보입니다.

실제 응용

두 색을 바로 이으면 가운데가 탁해진다

그라디언트를 만들었는데 중간에 회색빛 띠가 생기는 일이 있습니다. 특히 보색에 가까운 두 색(파랑↔노랑, 빨강↔초록)을 이을 때 두드러집니다. 브라우저가 두 색 사이를 RGB 값 그대로 직선으로 섞기때문인데, 그 경로가 채도가 낮은 지대를 지나갑니다.

해결은 가운데에 정지점을 하나 더 넣는 것입니다. 두 색의 중간쯤에서 채도가 살아 있는 색을 골라 50% 위치에 두면 탁한 구간이 사라집니다. 위 도구에서 정지점을 추가해 가운데 색을 조절해 보세요.

배경에 얹는 그라디언트는 투명도로 만든다

카드나 히어로 위에 그라디언트를 덮을 때, 색을 직접 지정하면 배경색이 바뀔 때마다 그라디언트도 새로 만들어야 합니다. 같은 색의 투명도만 바꾸는 방식이 더 오래갑니다.

/* 이미지 위에 글자를 얹을 때 아래쪽만 어둡게 */
.hero::after {
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0) 0%,
    rgb(0 0 0 / 0.7) 100%
  );
}

이렇게 두면 배경 이미지가 무엇이든 글자가 읽히고, 다크 모드에서 색을 다시 정할 필요도 없습니다.

투명으로 사라지게 할 때는 transparent를 쓰지 않는다

놓치기 쉬운 부분입니다. transparent는 사실 투명한 검정(rgba(0, 0, 0, 0))입니다. 그래서 흰색에서 transparent로 가는 그라디언트를 만들면 중간이 회색으로 뜹니다. 검정 쪽으로 섞이면서 지나가기 때문입니다.

/* ✗ 중간이 탁한 회색이 된다 */
linear-gradient(90deg, #fff, transparent)

/* ✓ 같은 색의 투명한 버전으로 끝낸다 */
linear-gradient(90deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0))

줄무늬와 패턴

정지점 두 개를 같은 위치에 두면 경계가 딱 떨어집니다. 여기에 반복을 켜면 줄무늬가 됩니다. 이미지 없이 배경 패턴을 만들 수 있어 로딩 자리표시자나 공사 중 표시에 씁니다.

/* 45도 줄무늬 */
background: repeating-linear-gradient(
  45deg,
  #e7e4de 0px, #e7e4de 10px,
  #faf9f7 10px, #faf9f7 20px
);

conic으로 같은 걸 하면 파이 차트나 색상환이 나옵니다. 각도를 정지점 위치로 쓰면 되고, border-radius: 50%를 함께 주면 원이 됩니다.

성능: 애니메이션에는 쓰지 않는다

background는 GPU가 아니라 CPU가 매 프레임 다시 칠하는 속성입니다. 그라디언트를 transition으로 움직이면 화면이 끊깁니다. 움직임이 필요하면 그라디언트를 크게 그려 두고 background-position이나 transform으로 옮기는 편이 훨씬 부드럽습니다.

큰 영역에 정지점이 많은 그라디언트를 여러 겹 쌓는 것도 비용이 큽니다. 배경 전체를 덮는 그라디언트라면 정지점 서넛으로 충분합니다.