🌈 CSS 그라디언트 생성기 – 색상표·Linear·Radial·Conic 즉시 코드 복사
CSS 그라디언트 생성기는 웹 디자이너와 프론트엔드 개발자를 위한 무료 온라인 툴입니다. Linear(선형), Radial(방사형), Conic(원뿔형) 그라디언트를 시각적으로 설정하고, CSS 코드를 즉시 복사할 수 있어 복잡한 코드를 직접 짤 필요가 없습니다. 모바일·태블릿·PC 반응형 미리보기로 실제 화면에서 어떻게 보이는지 확인하고, 세계 유일의 색약 모드(CVD)로 색각이상 사용자의 시점까지 테스트하세요. 아래 인기 그라디언트 색상표에서 트렌디한 조합을 클릭하면 바로 적용됩니다.
📱 미리보기:
그라디언트 미리보기
💡 방향을 선택하고 색상 정지점(Color Stop)을 추가해 나만의 그라디언트를 만드세요. CSS 코드가 즉시 생성됩니다.
💡 중심점 위치와 모양을 설정하면 원형/타원형 그라디언트가 생성됩니다.
💡 Conic 그라디언트는 CSS 최신 스펙으로 파이 차트, 색상환, 특수 효과에 활용됩니다. Chrome 69+, Firefox 83+ 지원.
🎨 색상 정지점 (Color Stops)
100%
CSS 코드 생성 결과
🗂️ 인기 CSS 그라디언트 색상표 – 클릭하면 즉시 적용
트렌디한 UI 디자인에서 실제로 사용되는 인기 CSS 그라디언트 조합을 모았습니다. 각 카드를 클릭하면 위 생성기에 자동으로 적용되어 CSS 코드를 바로 확인하고 복사할 수 있습니다. SNS 배너, 히어로 섹션, 버튼, 카드 배경 등 다양한 용도로 활용해보세요.
클립보드에 복사되었습니다! ✅
📖 CSS 그라디언트란? Linear·Radial·Conic 완벽 정리
CSS 그라디언트(gradient)는 두 가지 이상의 색상이 부드럽게 전환되는 효과를 CSS만으로 구현하는 기술입니다. 이미지 파일 없이 순수 코드로 배경을 꾸밀 수 있어 파일 용량 절감, 해상도 독립, 빠른 렌더링이라는 세 가지 장점이 있습니다. 현대 웹 디자인에서 배경, 버튼, 텍스트 효과, 테두리 등 다양한 곳에 적극 활용됩니다.
① Linear Gradient (선형 그라디언트)
형식:
예시:
특징: 직선 방향으로 색상이 전환. 웹에서 가장 많이 쓰이는 기본형.
형식:
linear-gradient(방향 또는 각도, 색상1 위치, 색상2 위치, ...)예시:
background: linear-gradient(to right, #ff6b6b, #4ecdc4);특징: 직선 방향으로 색상이 전환. 웹에서 가장 많이 쓰이는 기본형.
to right, 135deg 등으로 방향 지정 가능.
② Radial Gradient (방사형 그라디언트)
형식:
예시:
특징: 중심에서 바깥으로 퍼져나가는 원형/타원형 그라디언트. 스포트라이트 효과, 3D 버튼 표현에 적합.
형식:
radial-gradient(모양 크기 at 중심위치, 색상1, 색상2, ...)예시:
background: radial-gradient(circle at center, #f093fb, #f5576c);특징: 중심에서 바깥으로 퍼져나가는 원형/타원형 그라디언트. 스포트라이트 효과, 3D 버튼 표현에 적합.
③ Conic Gradient (원뿔형 그라디언트)
형식:
예시:
특징: 중심점을 기준으로 원을 따라 색상이 회전. CSS Color Level 4 스펙. 파이 차트, 색상환 표현에 탁월. Chrome 69+, Firefox 83+, Safari 12.1+ 지원.
형식:
conic-gradient(from 시작각도 at 위치, 색상1 각도, 색상2 각도, ...)예시:
background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff0000);특징: 중심점을 기준으로 원을 따라 색상이 회전. CSS Color Level 4 스펙. 파이 차트, 색상환 표현에 탁월. Chrome 69+, Firefox 83+, Safari 12.1+ 지원.
④ Repeating Gradient (반복 그라디언트)
형식:
예시:
특징: 패턴을 반복하여 줄무늬, 격자, 체크보드 등 기하학적 배경 패턴 생성에 사용. 성능이 좋아 CSS 패턴에 널리 쓰임.
형식:
repeating-linear-gradient() / repeating-radial-gradient()예시:
background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #fff 10px, #fff 20px);특징: 패턴을 반복하여 줄무늬, 격자, 체크보드 등 기하학적 배경 패턴 생성에 사용. 성능이 좋아 CSS 패턴에 널리 쓰임.
🔧 CSS 그라디언트 색상표 – 방향별·형태별 코드 모음
실무에서 바로 쓸 수 있는 CSS 그라디언트 코드를 유형별로 정리했습니다. 복사해서 바로 사용하거나, 위 생성기에서 색상을 수정해 커스터마이징하세요.
수평 그라디언트 (왼쪽 → 오른쪽)
background: linear-gradient(to right, #667eea, #764ba2);background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
대각선 그라디언트
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);background: linear-gradient(to bottom right, #fa709a, #fee140);
3색 이상 멀티 그라디언트
background: linear-gradient(to right, #f83600 0%, #f9d423 50%, #43e97b 100%);background: linear-gradient(to right, #a18cd1, #fbc2eb, #a1c4fd, #c2e9fb);
반투명 그라디언트 (오버레이용)
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
💡 CSS 그라디언트 실전 활용 가이드 – 디자이너·개발자를 위한 팁
CSS 그라디언트를 더 잘 활용하기 위한 실전 노하우를 정리했습니다. 단순한 두 색상 전환을 넘어, 전문가 수준의 그라디언트 디자인을 구현해보세요.
- 색상 정지점 중복 활용: 같은 색을 연속된 위치에 두면 그라디언트 없이 색상이 갑자기 바뀌는 효과를 만들 수 있습니다. 예)
#ff0000 33%, #0000ff 33% - 그라디언트 + 배경 이미지 레이어:
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('image.jpg');처럼 그라디언트를 이미지 위에 겹쳐 오버레이 효과를 낼 수 있습니다. - 텍스트에 그라디언트 적용:
background: linear-gradient(to right, #f83600, #f9d423); -webkit-background-clip: text; -webkit-text-fill-color: transparent;로 텍스트에 그라디언트를 입힐 수 있습니다. - 버튼 호버 효과:
background-size: 200% auto;와background-position트랜지션을 결합하면 마우스 호버 시 그라디언트가 슬라이드되는 효과를 만들 수 있습니다. - CSS 변수로 그라디언트 관리:
:root { --grad-primary: linear-gradient(135deg, #667eea, #764ba2); }로 정의하면 일관성 있게 재사용할 수 있습니다. - 성능 최적화: 복잡한 그라디언트가 많으면 GPU 렌더링 부하가 증가할 수 있습니다.
will-change: background또는transform: translateZ(0)으로 하드웨어 가속을 활용하세요. - 브라우저 접두사: 최신 브라우저는 접두사 없이 지원하지만, 오래된 프로젝트에서는
-webkit-linear-gradient()가 필요할 수 있습니다. 생성기에서 자동으로 포함됩니다. - 접근성 주의: 그라디언트 배경 위 텍스트는 시작 색상과 끝 색상 모두에서 WCAG 대비 기준 4.5:1 이상을 충족하는지 확인해야 합니다.
🌈 트렌드 그라디언트 조합 모음 – 2024-2025 인기 색상
최근 웹 디자인 트렌드에서 자주 보이는 그라디언트 조합을 정리했습니다. 소셜미디어, SaaS 랜딩 페이지, 앱 UI 등에서 영감을 얻어 큐레이션했습니다.
- 네온 퍼플:
linear-gradient(135deg, #6C63FF, #F50057)— 다크모드 UI, 게임, IT 서비스에 적합 - 오션 블루:
linear-gradient(to right, #2196F3, #21CBF3)— 깔끔하고 신뢰감 있는 기업·금융 사이트에 적합 - 선셋 오렌지:
linear-gradient(to right, #FF416C, #FF4B2B)— 식품, 쇼핑몰, 에너지 브랜드에 적합 - 민트 그린:
linear-gradient(120deg, #84fab0, #8fd3f4)— 헬스케어, 자연, 웰니스 브랜드에 적합 - 로즈골드:
linear-gradient(to right, #f7971e, #ffd200)— 럭셔리, 뷰티, 패션 브랜드에 적합 - 딥 스페이스:
linear-gradient(to bottom, #0f0c29, #302b63, #24243e)— 포트폴리오, 기술, 우주 테마에 적합
❓ 자주 묻는 질문 (FAQ)
CSS 그라디언트와 이미지 중 어떤 것이 더 빠른가요? ▼
대부분의 경우 CSS 그라디언트가 이미지보다 훨씬 빠릅니다. 이미지는 서버에서 파일을 다운로드해야 하지만, CSS 그라디언트는 브라우저가 직접 GPU를 활용해 렌더링하므로 HTTP 요청이 없고 캐싱 걱정도 없습니다. 또한 해상도에 독립적이어서 4K·레티나 디스플레이에서도 선명하게 표시됩니다. 단, 매우 복잡한 그라디언트(정지점이 수십 개인 경우)는 렌더링 부하가 증가할 수 있으므로 적절히 사용하세요.
그라디언트에 투명도를 적용하려면? ▼
두 가지 방법이 있습니다. 첫째, rgba() 색상 값 사용:
linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.3))처럼 색상에 직접 알파값을 지정합니다. 둘째, HEX 8자리 사용: linear-gradient(#FF000080, #0000FF4D)처럼 HEX 뒤에 2자리 16진수(00=완전투명, FF=완전불투명)를 추가합니다. 투명 그라디언트는 이미지 위 오버레이, 텍스트 가독성 확보, 유리 효과(glassmorphism) 구현에 자주 활용됩니다.Conic 그라디언트 브라우저 호환성은? ▼
Conic 그라디언트는 Chrome 69+, Edge 79+, Firefox 83+, Safari 12.1+, Opera 56+에서 지원됩니다. Internet Explorer는 지원하지 않습니다. 2024년 현재 글로벌 브라우저 점유율 기준 약 95% 이상의 사용자에게 정상 표시됩니다. IE 지원이 필요한 레거시 프로젝트에서는 Linear/Radial Gradient를 fallback으로 제공하는 것이 좋습니다. @supports 규칙으로 분기 처리도 가능합니다.
그라디언트를 테두리(border)에 적용할 수 있나요? ▼
CSS에서 border에 직접 그라디언트를 지정할 수 없지만, 두 가지 트릭으로 구현할 수 있습니다. 첫째,
border-image 속성 활용: border-image: linear-gradient(to right, #f83600, #f9d423) 1;. 단, border-radius와 함께 쓰기 어렵습니다. 둘째, pseudo-element 활용: ::before에 그라디언트 배경을 적용하고 내부 요소로 가리는 방식으로 둥근 그라디언트 테두리를 만들 수 있습니다. 최신 CSS는 @property를 활용한 애니메이션 그라디언트 테두리도 가능합니다.색약 사용자를 위한 그라디언트 디자인 주의사항은? ▼
적색맹(Protanopia)과 녹색맹(Deuteranopia)은 빨강·초록 계열 구분이 어렵습니다. 빨강에서 초록으로 가는 그라디언트는 색각이상자에게 갈색 또는 회색처럼 보일 수 있습니다. 파랑·주황 또는 파랑·노랑 조합은 대부분의 색각이상자에게도 잘 구분됩니다. 본 생성기의 색약 모드 버튼으로 각 색각이상 유형에서 그라디언트가 어떻게 보이는지 미리 테스트해 접근성을 높이세요. 이 기능은 다른 CSS 그라디언트 툴에서는 찾아보기 어려운 차별화된 기능입니다.
그라디언트에 애니메이션을 적용할 수 있나요? ▼
CSS 그라디언트 자체는 @keyframes 애니메이션 대상이 되지 않지만(background-image는 보간 불가), 몇 가지 방법으로 구현할 수 있습니다. 가장 일반적인 방법은
background-size와 background-position을 변경하는 것으로, background-size: 200% 200%로 큰 그라디언트를 만들고 position을 애니메이션하면 흐르는 듯한 효과를 낼 수 있습니다. 또한 CSS @property(Houdini)를 사용하면 그라디언트 내 색상값 자체를 애니메이션할 수 있어 완전한 색상 전환 애니메이션이 가능합니다. Chrome 85+, Edge 85+ 지원.