CSS 그라디언트 생성기

CSS 그라디언트 생성기란?

CSS 그라디언트(gradient, 그라데이션)는 이미지 파일 없이 CSS 코드만으로 두 가지 이상의 색이 자연스럽게 이어지는 배경을 만드는 기능입니다. 버튼, 배너, 카드 배경 등에 쓰이며 이미지보다 가볍고 화면 크기에 맞춰 선명하게 그려집니다.

이 생성기에서는 각도 다이얼과 색 막대를 직접 끌어 조절하면 미리보기와 linear-gradient, radial-gradient, conic-gradient 코드가 동시에 바뀝니다.

사용 방법

1. 선형·원형·원뿔 중 그라데이션 종류를 고르세요.
2. 선형과 원뿔은 다이얼을 돌리거나 슬라이더·숫자로 각도를 정하고, 원형은 모양과 중심 위치를 고르세요.
3. 색 막대의 동그라미를 끌어 위치를 바꾸고, 막대의 빈 곳을 누르거나 + 색 추가로 색을 늘리세요. 아래 목록에서 색과 위치(%)를 정확히 입력할 수도 있습니다.
4. 마음에 드는 결과가 나오면 CSS 복사를 눌러 스타일시트에 붙여 넣으세요.

그라디언트 종류와 문법

선형 그라디언트의 각도는 0deg가 아래에서 위(↑), 90deg가 왼쪽에서 오른쪽(→), 180deg가 위에서 아래(↓) 방향입니다. 색 뒤의 %는 그 색이 정확히 나타나는 위치이며, 두 색을 같은 위치에 두면 경계가 딱 끊기는 줄무늬를 만들 수 있습니다.

디자인 팁

• 채도가 높은 보색끼리 섞으면 중간이 탁한 회색이 되기 쉽습니다. 색상환에서 가까운 두 색을 쓰거나 중간에 밝은 색을 하나 더 넣어 보세요.
• 그라디언트 위에 글자를 올릴 때는 가장 밝은 부분과 가장 어두운 부분 모두에서 글자가 잘 읽히는지 확인하세요. 색상 코드 변환 도구의 명도 대비 검사를 활용할 수 있습니다.
• CSS 코드의 첫 줄 background: 단색;은 아주 오래된 브라우저를 위한 대체 색입니다.