도구 가이드
그라디언트는 두 색 사이를 부드럽게 이어 배경에 깊이를 주는 효과입니다. CSS의 linear-gradient는 지정한 각도로 색이 변하고, radial-gradient는 중심에서 바깥으로 퍼져 나갑니다.
문법을 외워 손으로 적으면 각도 방향을 헷갈리기 쉽고 결과를 보려면 매번 새로고침해야 합니다. 이 도구는 색과 각도를 조절하면 미리보기가 즉시 바뀌고 완성된 CSS 코드가 함께 나옵니다.
생성된 코드는 그대로 복사해 스타일시트에 붙여넣으면 됩니다.
사용 방법
- 시작 색과 끝 색을 선택합니다.
- linear 또는 radial 방식을 고릅니다.
- linear라면 각도를 조절해 방향을 정합니다.
- 미리보기를 확인하고 CSS 코드를 복사합니다.
이럴 때 유용해요
- 웹사이트 히어로 영역의 배경을 만들 때
- 버튼이나 카드에 입체감을 줄 때
- 이미지 위에 글자를 얹기 위한 어두운 오버레이를 만들 때
- 브랜드 색을 활용한 배경 패턴을 만들 때
사용 팁
- 색상환에서 가까운 두 색을 쓰면 자연스럽고, 먼 색을 쓰면 중간에 탁한 색이 지나갑니다.
- 그라디언트 위에 글자를 올릴 때는 가장 밝은 지점과 가장 어두운 지점 모두에서 대비를 확인하세요.
- 45도나 135도 같은 대각선 방향이 수직·수평보다 자연스러워 보이는 경우가 많습니다.