그라데이션 생성기

🌈 그라데이션 생성기란?

그라데이션 생성기는 CSS 그라데이션을 시각적으로 만드는 온라인 도구입니다. 선형(linear), 원형(radial), 원뿔형(conic) 세 가지 타입을 지원하며, 색상, 각도, 위치를 자유롭게 조절하여 원하는 배경 효과를 만들 수 있습니다. 생성된 CSS 코드를 복사하여 웹사이트에 바로 적용할 수 있습니다.

📋 그라데이션 유형

💡 그라데이션 디자인 팁

• 인접 색상: 색상환에서 60° 이내로 떨어진 색끼리 섞으면 중간에 탁한 회색대가 생기지 않고 매끄럽게 전환됩니다. (예: 파랑→보라)
• 명도 대비: 시작 색의 L값이 70%, 끝 색이 30% 정도로 차이가 나면 입체감이 살아납니다. 같은 명도 두 색은 평면적으로 보입니다.
• 중간 색상: 두 색만 쓸 때 회색이 보인다면 두 색의 색조 평균에 해당하는 색을 50% 지점에 stop으로 끼워주세요(예: 빨강 0% → 주황 50% → 노랑 100%).
• 위치 조절: stop 위치를 0%, 30%, 100%처럼 비대칭으로 두면 한쪽이 강조되는 비대칭 그라데이션이 만들어져 시선이 한쪽으로 흐릅니다.
• 각도 활용: 135°는 좌상단→우하단으로 흐르는 가장 자연스러운 대각선이며, Stripe·Linear 같은 SaaS 히어로 배경에서 자주 보입니다.
• Hard stop: 같은 위치에 두 색을 연속으로 넣으면(예: red 50%, blue 50%) 그라데이션 대신 단색 분할 배경이 되어 인포그래픽에 활용됩니다.

🎯 유형별 추천 사용처

선형 그라데이션은 헤더 배너, 카드 배경, 버튼 등 정적인 영역에 가장 흔히 쓰이며,135° 각도와 두 색 조합만으로도 충분히 모던한 인상을 줍니다.원형(radial)은 중심에서 퍼지는 빛 효과나 카드의 spot highlight, 다크 테마의 vignette 처리에 유용하고,conic은 도넛 차트 배경, 로딩 스피너, 컬러 휠 같은 회전 모티프에서 빛납니다. 모바일에서는 그라데이션 영역이 크면 GPU 합성 비용이 들 수 있으니 헤더 전체 대신 카드 단위로 분할해 적용하는 것이 성능에 유리합니다.

자주 묻는 질문