CSS 그라디언트 생성기
선형·원형·코닉 그라디언트 · 8방향 선택 · HEX 직접 입력 · CSS 코드 즉시 복사
⚡ 실시간 미리보기
🌈 3가지 타입
📋 CSS 코드 복사
🌟 30개+ 프리셋
🔁 반복 그라디언트
🌈그라디언트 설정
🔁 반복 그라디언트 (repeating)
방향 각도
색상 스톱
135°
📋CSS 코드
🌟프리셋 (30개+)
📖 CSS 그라디언트 사용 가이드
CSS 그라디언트는 이미지 파일 없이 코드만으로 색상 전환 효과를 구현할 수 있어요. 웹 성능에도 유리하고 반응형으로도 잘 동작해요.
🎨 생성기 사용법
1.타입 선택: 선형·원형·코닉 중 하나
2.색상 스톱의 색상·위치(%) 조정
3.방향 버튼 또는 슬라이더로 각도 설정
4.프리셋 클릭으로 즉시 적용 가능
5.복사 버튼으로 CSS 코드 복사
💻 CSS 적용 방법
•div나 섹션 배경:
background: linear-gradient(...);•텍스트 색상: background-clip + text 조합
•버튼·카드: border-image로 테두리 그라디언트
•오버레이: 이미지 위에 반투명 그라디언트 겹치기
🔁 반복 그라디언트 활용
•줄무늬 패턴 만들기 → 반복 ON
•색상 위치를 촘촘하게 → 날카로운 줄무늬
•코닉+반복 → 체크·파이 패턴
•원형+반복 → 과녁·물결 패턴
🌈 3가지 타입 구분
선형한 방향으로 색상 전환 · 배너·Hero
원형중심에서 바깥으로 퍼짐 · 조명 효과
코닉중심 기준 각도로 전환 · 파이차트·색상환
❓ 자주 묻는 질문
Q. CSS 그라디언트란 무엇인가요?
두 개 이상의 색상이 부드럽게 전환되는 CSS 효과예요. 이미지 파일 없이 CSS 코드만으로 구현해 웹 성능에 유리하고 반응형 크기 변환에도 깔끔하게 동작해요.
Q. 반복 그라디언트는 어떻게 쓰나요?
반복 ON을 켜면 repeating-linear-gradient 코드가 생성돼요. 색상 스톱의 위치를 짧게 설정하면 줄무늬, 패턴 등 반복 배경을 만들 수 있어요. 예: 0%~10% 사이에 색상을 넣으면 10% 간격으로 반복돼요.
Q. 생성된 CSS 코드를 어디에 쓰나요?
복사한 코드를 요소의
background 속성에 붙여넣으면 돼요. 워드프레스 커스터마이저, Figma, Webflow, HTML/CSS 어디서든 활용 가능해요.
Q. HEX 코드를 직접 입력할 수 있나요?
네! 색상 피커 옆의 HEX 입력란에 #FF5733 형식으로 직접 입력하면 즉시 반영돼요. 색상 피커와 HEX 입력란이 서로 연동돼요.
Q. 모든 브라우저에서 동작하나요?
선형·원형 그라디언트는 모든 현대 브라우저에서 지원돼요. 코닉 그라디언트(conic-gradient)는 IE에서 미지원이며, Chrome·Firefox·Safari·Edge 최신 버전에서 정상 동작해요.