CSS 그라디언트 생성기

왜 내 그라디언트는 중간이 탁해질까

두 색을 섞으면 그 사이 색이 지저분한 회색빛으로 죽어 버리는 일이 흔합니다. 파랑과 주황을 이으면 중간이 진흙색이 됩니다. 이건 취향 문제가 아니라 색상환에서 두 색이 얼마나 떨어져 있는지의 문제입니다.

CSS 그라디언트는 기본적으로 두 색을 RGB 공간에서 직선으로 잇습니다. 색상환에서 마주 보는 색(보색)끼리 이으면 그 직선이 채도가 낮은 회색 지점을 지나갑니다. 그래서 중간이 탁해집니다.

• 색상환에서 30~60도 이내로 떨어진 색끼리 이으세요. 파랑-보라, 주황-분홍처럼요. 이 도구의 랜덤 버튼이 정확히 이 방식으로 색을 뽑습니다.
• 보색을 꼭 써야 한다면 중간에 정지점을 하나 더 넣어 밝은 색을 경유시키세요. 파랑 → 청록 → 노랑처럼 색상환을 따라 돌아가면 탁해지지 않습니다.
• 명도(밝기)도 함께 움직이면 훨씬 자연스럽습니다. 같은 밝기의 두 색은 경계가 흐릿하게 뭉개져 보입니다.
• 채도가 너무 높은 두 색을 붙이면 경계에 없던 색 띠가 보이기도 합니다. 채도를 조금 낮추면 사라집니다.

선형·원형·원뿔, 무엇을 언제 쓰나

원뿔(conic)은 시작 각도를 정할 수 있습니다. 이 도구에서 원뿔을 고르면 각도 슬라이더가 "from Xdeg"로 동작합니다. 각도 0도는 위쪽(12시)에서 시작해 시계 방향으로 돕니다.

원형(radial)에서는 각도가 의미가 없으므로 슬라이더가 숨겨지고, 대신 모양(원/타원)과 중심 위치를 고릅니다. 중심을 "위"로 두면 위에서 빛이 내려오는 느낌이 납니다.

사진 위 글자를 살리는 오버레이

실무에서 그라디언트가 가장 많이 쓰이는 곳은 사실 예쁜 배경이 아니라 사진 위 텍스트 가독성 확보입니다. 히어로 이미지 위에 흰 글자를 얹으면 사진의 밝은 부분에서 글자가 사라집니다. 그렇다고 사진 전체를 어둡게 깔면 사진이 죽습니다.

해법은 글자가 있는 쪽만 어둡게 덮는 투명도 그라디언트입니다. 정지점 하나의 투명도를 0으로 두면 그쪽은 사진이 그대로 보이고, 반대쪽만 자연스럽게 어두워집니다.

1. 정지점 2개를 모두 검정(#000000)으로 둡니다.
2. 첫 정지점의 투명도를 0으로, 위치를 40% 정도로 둡니다.
3. 두 번째 정지점의 투명도를 70~80%, 위치를 100%로 둡니다.
4. 각도를 180deg(위에서 아래)로 맞추고 CSS를 복사합니다.

.hero {
  position: relative;
  background: url(photo.jpg) center/cover;
}
/* 아래쪽만 어둡게 — 글자가 아래에 있을 때 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.75) 100%);
}
.hero h1 { position: relative; z-index: 1; color: #fff; }

반복(repeating)으로 줄무늬 만들기

반복 옵션을 켰는데 아무 변화가 없다고 느끼는 경우가 많습니다. 반복은 "정지점이 끝나는 지점부터 다시 처음"을 되풀이하는 기능이라, 정지점이 0~100%에 넓게 퍼져 있으면 화면을 딱 한 번 채우고 끝나 반복할 자리가 없습니다.

줄무늬를 만들려면 정지점을 좁은 범위에 몰아야 합니다. 그리고 같은 위치에 색을 두 번 두면(예: 50%에 두 색) 그라데이션 없이 딱 끊긴 줄이 됩니다.

/* 사선 줄무늬 — 경계를 같은 위치에 두면 딱 떨어진다 */
background: repeating-linear-gradient(45deg,
  #4f46e5 0px, #4f46e5 10px,
  #c7d2fe 10px, #c7d2fe 20px);

실무에서 조심할 것

• 텍스트 대비 — 그라디언트 배경 위의 글자는 밝은 쪽 끝에서 안 보이기 쉽습니다. 가장 밝은 정지점 기준으로 대비를 확인하세요.
• 큰 면적의 부드러운 그라디언트는 계단처럼 색 띠(밴딩)가 보일 수 있습니다. 특히 어두운 색끼리 이을 때 두드러집니다. 정지점을 하나 더 넣거나 아주 옅은 노이즈를 얹으면 완화됩니다.
• 버튼에 쓸 때는 hover 상태를 잊지 마세요. 그라디언트는 transition으로 부드럽게 바뀌지 않습니다. 색이 툭 바뀝니다.
• 다크 모드에서 밝은 그라디언트는 눈이 부십니다. 채도와 밝기를 낮춘 별도 값을 준비하세요.