플랫한 단색 배경이 다소 밋밋하게 느껴질 때, 그라데이션 하나만 더해도 화면에 깊이감과 생동감이 생깁니다. CSS에서 그라데이션을 만드는 건 생각보다 간단하지만, 몇 가지 원리를 알아두면 기본값처럼 보이는 그라데이션과 의도가 느껴지는 그라데이션의 차이를 만들 수 있습니다.
1. 기본 문법: linear-gradient vs radial-gradient
`linear-gradient()`는 직선 방향으로 색이 변하는 그라데이션을, `radial-gradient()`는 중심에서 바깥으로 퍼지는 원형 그라데이션을 만듭니다. 예를 들어:
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
이렇게 작성하면 135도 각도로 붉은색에서 청록색으로 자연스럽게 이어지는 배경이 만들어집니다. 각도(deg) 대신 `to right`, `to bottom right` 같은 방향 키워드를 써도 되고, 색상을 두 개가 아니라 여러 개 나열해 다채로운 흐름을 만들 수도 있습니다.
2. 자주 쓰는 그라데이션 레시피 3가지
메시 그라데이션 느낌 내기
유사색(색상환에서 인접한 색) 서너 개를 45도 각도로 부드럽게 이어보세요. 통일감 있으면서도 은은한 입체감이 생깁니다.
모노크로매틱 그라데이션
히어로 섹션이나 버튼에는 같은 색상의 명도만 다르게 조합한 모노크로매틱 그라데이션이 잘 어울립니다. 톤이 튀지 않으면서도 은근한 깊이를 줄 수 있습니다.
보색 그라데이션
눈에 확 띄는 포인트가 필요하다면 보색 조합의 그라데이션을 써보세요. 다만 채도를 살짝 낮추지 않으면 색이 부딪혀 산만해 보일 수 있으니 주의가 필요합니다.
3. 미리 만들어진 그라데이션 활용하기
색을 직접 조합하는 게 막막하다면, 미리 만들어진 그라데이션 팔레트를 참고하고 코드를 그대로 복사해 쓰는 방법도 좋습니다. 원하는 분위기(따뜻한, 차분한, 파스텔 등)의 그라데이션을 골라 CSS 코드를 바로 가져다 쓰면 디자인 검토 시간을 크게 줄일 수 있습니다.
4. 배경 너머: 텍스트·테두리·그림자에 응용하기
그라데이션은 배경뿐 아니라 다른 곳에도 응용할 수 있습니다. `background-clip: text`와 투명한 텍스트 색을 함께 쓰면 텍스트 자체를 그라데이션으로 채울 수 있고, 테두리나 그림자에 그라데이션을 적용하면 단색보다 훨씬 부드러운 포인트를 줄 수 있습니다.
기본기를 익힌 뒤에는 배경이 아닌 요소 하나에 그라데이션을 적용해보세요. 작은 변화지만 페이지의 완성도를 눈에 띄게 끌어올려 줍니다.