CSS 그라디언트 생성기
선형·원형·코닉 그라디언트 · CSS 코드 즉시 복사
⚡ 실시간 미리보기
🌈 3가지 타입
📋 CSS 코드 복사
🌟 프리셋 제공
🌈
그라디언트 설정
방향 각도
색상 스톱
135°
📋
CSS 코드
🌟
프리셋
❓ 자주 묻는 질문
Q. CSS 그라디언트란?
CSS 그라디언트는 두 개 이상의 색상이 부드럽게 전환되는 효과입니다. 이미지 파일 없이 CSS 코드만으로 구현할 수 있어 웹 성능에 유리합니다. 선형(linear), 원형(radial), 코닉(conic) 3가지 타입이 있습니다.
Q. 선형·원형·코닉 그라디언트의 차이는?
선형(linear-gradient)은 한 방향으로 색상이 전환됩니다. 원형(radial-gradient)은 중심에서 바깥으로 퍼지는 방식입니다. 코닉(conic-gradient)은 원의 중심을 기준으로 각도에 따라 색상이 바뀌며, 파이 차트나 색상환 표현에 유용합니다.
Q. 생성된 CSS 코드를 어디에 사용하나요?
복사한 CSS 코드를 background 또는 background-image 속성에 붙여넣으면 됩니다. 예) .hero { background: linear-gradient(135deg, #667eea, #764ba2); } 워드프레스, 티스토리, Figma 등 어디서든 활용 가능합니다.