CSS 원형 그라데이션 생성기 사용자 지정 모양, 위치 및 색상을 가진 CSS 원형 그라데이션을 생성합니다.
원형 그라데이션 생성기
사용자 지정 모양, 위치 및 색상을 가진 CSS 원형 그라데이션을 생성합니다.
색상 선택
그라데이션의 중심 색상과 가장자리 색상을 설정합니다.
도형 구성
원 또는 타원 도형을 선택하고 중심 위치를 설정합니다.
CSS 코드 복사
프로젝트에 사용할 수 있는 생성된 CSS 코드를 복사합니다.
What Is 원형 그라데이션 생성기?
원형 그라데이션 생성기는 중심점에서 원형 또는 타원형 패턴으로 바깥쪽으로 방사하는 CSS 그라데이션을 생성합니다. 직선 沿いに 전환되는 선형 그라데이션과는 달리, 원형 그라데이션은 스포트ไล팅 효과, 빛나는 구체 및 현대적인 웹 디자인에서 일반적으로 사용되는 깊이 효과를 만드는 데 사용됩니다. 그라데이션 모양(원 또는 타원), 중심 위치 및 색상을 제어할 수 있습니다. 생성기는 모든 최신 브라우저에서 작동하는 CSS radial-gradient() 코드를 생성합니다. 원형 그라데이션은 시각적인 깊이, 영웅 섹션의 스포트라이팅 효과, 장식적 배경 및 평면 디자인을 더 차원적으로 만드는 미묘한 조명 효과를 만들기 위해 특히 효과적입니다.
Why Use 원형 그라데이션 생성기?
-
다양한 효과를 위한 원과 타원 도형 옵션
-
X/Y 슬라이더로 조정 가능한 중심 위치
-
설정 변경 시 실시간으로 업데이트되는 미리보기
-
생산 준비가 완료된 깨끗한 CSS 출력
-
회원 가입 없이 무료로 사용 가능
Common Use Cases
스포트라이트 효과
히어로 섹션 또는 제품 이미지에 초점을 맞추는 스포트라이트 효과를 생성합니다.
글로우 효과
카드, 모달 또는 장식 요소에 대한 발광 오브 배경을 생성합니다.
깊이 및 차원
부드러운 방사형 색상 전환으로 평면 디자인에 시각적 깊이를 추가합니다.
비涅트 효과
영화적인 외관을 위해 이미지 위에 어두운 가장자리가 있는 비涅트를 생성합니다.
Technical Guide
CSS radial-gradient()는 한 점에서 방사하는 그라데이션을 생성합니다. 구문은: radial-gradient(모양 tại 위치, 색상1, 색상2)입니다. 모양은 "원"(모든 方向에 동일한 반지름) 또는 "타원"(요소의 종횡비와 일치하는 반지름)일 수 있습니다. 위치는 백분율 값을 사용합니다(50% 50%는 중심입니다). closest-side, farthest-corner와 같은 크기 키워드는 그라데이션이 얼마나 확장되는지를 제어합니다. 색상 중지는 선형 그라데이션과 마찬가지로 작동합니다. 브라우저는 중심에서 바깥쪽으로 원형 또는 타원형의 동심원을 따라 색상을 보간합니다. 원형 그라데이션은 조합할 수 있습니다. 배경 이미지에 쉼표로 구분하여 여러 개의 원형 그라데이션을 레이어링하여 여러개의 빛 소스를 위한 복잡한 효과를 만들 수 있습니다.
Tips & Best Practices
-
1완벽한 원형 그라데이션을 위한 '원'과 측면비를 인식하는 도형을 위한 '타원' 사용
-
2非대칭 조명 효과를 위해 중심 위치를偏心(예: 30% 30%)로 설정
-
3복잡한 다중 광원 효과를 위한 여러 방사형 그라데이션 레이어
-
4배경 위에 미묘한 페이드 아웃 효과를 위한 투명색을 가장자리 색상으로 사용
-
5크리에이티브 오버레이 효과를 위한 배경 블렌드 모드와의 조합
Related Tools
색상 선택기
HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.
🎨 Color Tools
선형 그라데이션 생성기
사용자 지정 색상, 각도 및 색상 중지와 함께 CSS 선형 그라데이션을 만듭니다.
🎨 Color Tools
원추형 그라데이션 생성기
파이 차트, 색상輪 및 스윕 효과를 위한 CSS 원추형 그라데이션을 생성합니다.
🎨 Color Tools
컬러 믹서
조정 가능한 비율로 두 가지 색상을 혼합하고 전체 그라데이션을 확인하세요.
🎨 Color Tools
CSS 필터 생성기
블러, 밝기, 대조 度 등과 같은 CSS 필터 효과를 시각적 제어로 적용합니다.
🎨 CSS & DesignFrequently Asked Questions
Q 원과 타원의 차이는 무엇인가?
Q 중심 위치를 어디로 이동할 수 있나요?
Q 방사형 그라데이션이 모든 브라우저에서 지원되나요?
About This Tool
원형 그라데이션 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.