🌈 그라데이션 생성기
각도·색상을 조절하면 CSS 그라데이션 코드가 즉시 완성됩니다. 모든 처리는 브라우저에서만 이루어집니다.
사용 방법
- 그라데이션 종류(선형·원형·원뿔형)를 선택합니다.
- 시작 색과 끝 색을 고르고, 필요하면 중간 색을 추가합니다.
- 각도 슬라이더로 방향을 조절하며 미리보기를 확인합니다.
- 'CSS 복사' 버튼으로 완성된 코드를 복사해 붙여넣습니다.
이럴 때 유용해요
- 웹사이트 히어로 섹션이나 버튼의 배경을 꾸밀 때
- 블로그 썸네일·카드 UI에 쓸 색 조합을 실험할 때
- 감이 안 올 때 '랜덤 그라데이션' 버튼으로 아이디어를 얻을 때
알아두면 좋은 팁
- 원뿔형(conic)은 시작 색을 끝에 한 번 더 넣어야 경계선이 없는 매끄러운 원이 됩니다. 이 도구는 자동으로 처리합니다.
- 텍스트 위에 얹는 배경이라면 두 색의 밝기 차이를 줄여야 글자가 잘 읽힙니다.
- 버튼 hover 효과는 같은 색 조합에서 각도만 20~30° 돌려주면 자연스럽습니다.
자주 묻는 질문
linear-gradient 각도는 어떤 기준인가요?
0deg는 아래→위, 90deg는 왼쪽→오른쪽, 180deg는 위→아래 방향입니다. 시계 방향으로 회전하며, 디자인에서 가장 많이 쓰는 값은 대각선인 135deg입니다.
만든 그라데이션을 이미지로 저장할 수 있나요?
이 도구는 CSS 코드를 만드는 도구라 이미지 파일은 생성하지 않습니다. 배경 이미지가 필요하면 미리보기 영역을 캡처하거나, CSS를 적용한 요소를 스크린샷으로 저장하세요.
conic-gradient는 어떤 브라우저에서 되나요?
크롬 69+, 엣지 79+, 사파리 12.1+, 파이어폭스 83+ 등 2020년 이후 브라우저는 모두 지원합니다. 구형 브라우저 대응이 필요하면 linear-gradient를 대체 배경으로 함께 선언하세요.
3색 이상 그라데이션도 만들 수 있나요?
'중간 색 추가' 체크박스를 켜면 3색 그라데이션이 됩니다. 4색 이상이 필요하면 복사한 코드에서 '색상 위치%' 쌍을 쉼표로 이어 붙이면 됩니다. 예: #a 0%, #b 33%, #c 66%, #d 100%.
배경 전체에 그라데이션을 깔려면 어떻게 하나요?
복사한 background 속성을 body 선택자에 넣고 min-height: 100vh 를 함께 지정하면 화면 전체에 적용됩니다. 스크롤 시 반복되는 게 싫다면 background-attachment: fixed 를 추가하세요.
