CSS 그라데이션 만들기 — linear·radial 문법과 자연스러운 배색

단색 배경은 밋밋하고, 사진 배경은 무겁습니다. 그 사이에 그라데이션이 있습니다. 코드 몇 줄로 분위기를 바꿀 수 있지만, 막상 만들면 중간이 탁해지거나 방향이 생각과 다르게 나오기 일쑤입니다. 문법과 함께 자연스럽게 만드는 요령을 정리합니다.

기본 문법 — linear와 radial

CSS 그라데이션은 background 속성에 함수 형태로 씁니다. 가장 많이 쓰는 두 가지는 이렇습니다.

/* 선형: 45도 방향으로 보라 → 분홍 */
background: linear-gradient(45deg, #7c3aed, #ec4899);

/* 원형: 가운데에서 바깥으로 */
background: radial-gradient(circle, #fde68a, #f59e0b);

• linear-gradient — 직선 방향으로 색이 이어집니다. 버튼·배너·페이지 배경 등 대부분의 경우에 씁니다.
• radial-gradient — 중심에서 바깥으로 퍼집니다. 스포트라이트 느낌, 가운데를 강조하는 배경에 어울립니다.

각도와 정지점 읽는 법

• 각도: 0deg는 아래→위, 90deg는 왼쪽→오른쪽, 180deg는 위→아래입니다. to right, to bottom 같은 키워드도 같은 의미입니다.
• 정지점(color stop): 색 뒤에 위치를 퍼센트로 붙입니다. linear-gradient(90deg, #7c3aed 0%, #ec4899 30%, #f59e0b 100%) 처럼 쓰면 30% 지점까지 보라→분홍이 빠르게 바뀌고 나머지는 천천히 주황으로 갑니다.
• 색은 몇 개든: 정지점을 추가하면 3색, 4색 그라데이션도 됩니다. 다만 색이 많을수록 탁해질 구간도 늘어나니 2~3색이 무난합니다.

탁해지지 않는 색 고르기

• 이웃한 색끼리 잇기 — 파랑→보라, 보라→분홍, 주황→노랑처럼 색상환에서 가까운 색은 중간도 선명합니다.
• 밝기 차이로 만들기 — 같은 색의 진한 톤→연한 톤(네이비→하늘색)은 실패가 없습니다. 가장 안전한 선택입니다.
• 먼 색을 꼭 써야 하면 — 중간에 두 색을 잇는 다리 색(파랑→청록→노랑)을 정지점으로 추가하세요.

생성기로 만들기 3단계

1. 색을 2~3개 고르고 미리보기로 중간 구간이 탁하지 않은지 확인합니다.
2. 종류(선형·원형)와 각도를 조절해 방향을 잡습니다.
3. 완성된 CSS 코드를 복사해 background 속성에 붙여 넣습니다.