CSS 그라데이션 생성기
시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
CSS 그라데이션이란?
CSS 그라데이션은 이미지 파일 없이 두 개 이상의 색상 사이 부드러운 전환을 표시하는 CSS 이미지 값입니다. 그라데이션은 브라우저가 렌더링하므로 해상도에 독립적이고 성능이 매우 우수합니다.
지원되는 CSS 그라데이션 유형은?
이 생성기는 세 가지 유형을 지원합니다: linear-gradient(직선을 따른 색상), radial-gradient(중심에서 방사하는 색상), conic-gradient(시계 얼굴처럼 중심을 회전하는 색상).
선형과 방사형 그라데이션의 차이는?
선형 그라데이션은 각도 또는 방향 키워드로 정의된 직선을 따라 색상이 전환됩니다. 방사형 그라데이션은 중심점에서 바깥쪽으로 원형 또는 타원형으로 색상이 전환됩니다.
색상 정지점을 몇 개 사용할 수 있나요?
필요한 만큼 색상 정지점을 사용할 수 있습니다. 각 정지점은 색상과 선택적으로 그라데이션 라인의 위치(0%~100%)를 정의합니다. 여러 정지점으로 복잡한 다중 색상 전환을 만듭니다.
생성된 CSS 코드 사용법은?
생성된 CSS 코드를 복사하여 CSS 스타일시트의 background 또는 background-image 속성 값으로 붙여넣으세요. 코드는 모든 최신 브라우저에서 작동합니다.
그라데이션의 색상 정지점이란?
색상 정지점은 그라데이션 라인의 특정 위치에 특정 색상을 정의합니다. 예를 들어 "red 0%, blue 50%, green 100%"은 빨간색으로 시작해 중간에서 파란색을 거쳐 초록색으로 끝나는 그라데이션을 만듭니다.
각도 있는 그라데이션을 만들 수 있나요?
네, 선형 그라데이션은 0deg에서 360deg까지의 각도 값을 지원합니다. "to right", "to bottom", "to top left"와 같은 방향 키워드도 사용할 수 있습니다.
CSS 그라데이션이 반응형인가요?
네, CSS 그라데이션은 벡터 기반이고 브라우저가 렌더링하므로 본질적으로 반응형입니다. 품질 손실이나 파일 크기 증가 없이 모든 컨테이너 크기로 완벽하게 확장됩니다.
CSS 그라데이션이 페이지 성능에 영향을 주나요?
CSS 그라데이션은 일반적으로 매우 성능이 좋습니다. 이미지 파일에 대한 HTTP 요청을 제거하고 하드웨어 가속됩니다. 다만 매우 복잡한 그라데이션은 저가형 장치의 렌더링에 영향을 줄 수 있습니다.
그라데이션을 배경과 테두리에 사용할 수 있나요?
네, 그라데이션은 background-image, border-image, mask-image 및 CSS 이미지 값을 받는 모든 속성에 사용할 수 있습니다.
어떤 브라우저가 CSS 그라데이션을 지원하나요?
Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 최신 브라우저가 CSS 그라데이션을 지원합니다. IE10 이후 지원이 우수하며 벤더 접두사는 더 이상 필요하지 않습니다.
반복 그라데이션은 어떻게 만들나요?
표준 버전 대신 repeating-linear-gradient 또는 repeating-radial-gradient를 사용하세요. 전체 요소를 채우기 위해 그라데이션 패턴을 반복하여 줄무늬나 패턴 효과를 만듭니다.
CSS 그라데이션을 애니메이션할 수 있나요?
CSS 그라데이션은 CSS 전환으로 직접 애니메이션할 수 없습니다. 하지만 background-position, background-size를 애니메이션하거나 @property와 함께 CSS 사용자 정의 속성을 사용할 수 있습니다.
이 그라데이션 생성기는 무료인가요?
네, 이 CSS 그라데이션 생성기는 완전히 무료입니다. 등록이 필요 없고 사용 제한이 없으며 생성된 모든 코드는 귀속 없이 모든 프로젝트에 사용할 수 있습니다.
CSS 그라데이션 생성기 사용 방법
CSS 그라디언트를 눈으로 보며 만들고 바로 쓸 수 있는 코드를 복사하세요. 렌더링은 브라우저에서 로컬로 이루어지며 아무것도 업로드되지 않습니다.
- Type에서 그라디언트 종류를 선택합니다: linear-gradient 또는 radial-gradient.
- 선형 그라디언트는 Angle을 설정하고, 원형 그라디언트는 circle이나 ellipse 같은 Shape를 고릅니다.
- Color Stops 영역에서 색상 정지점을 추가하고 색을 바꾸며 위치를 드래그합니다.
- Presets 아래의 견본을 클릭하면 완성된 조합에서 시작할 수 있습니다.
- 생성된 CSS를 복사해 스타일시트에 붙여넣습니다.
서로 다른 색의 정지점 두 개를 같은 위치에 놓으면 경계가 선명해집니다. 이미지 없이 줄무늬 배경을 빠르게 만드는 방법입니다.
관련 도구
- CSS 박스 섀도 생성기 무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
- CSS Border Radius 생성기 시각적 CSS border-radius 생성기. 각 모서리를 독립적으로 조정하고 실시간 미리보기로 CSS 코드를 즉시 복사하세요.
- CSS Grid 생성기 라이브 미리보기가 있는 무료 시각적 CSS Grid 생성기. 반응형 그리드 레이아웃을 대화형으로 설계하고 프로덕션용 CSS 코드를 즉시 내보내세요.
- CSS Flexbox 생성기 라이브 미리보기가 있는 시각적 CSS Flexbox 생성기. Flex 속성을 조정하고 바로 사용할 수 있는 CSS 코드를 얻으세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.