CSS conic-gradient() 함수

정의와 사용법

CSS의 conic-gradient() 함수는 기하학적 원형 변화를 배경 이미지로 설정합니다。

기하학적 원형 변화는 중심점을 둘러싸고 회전하는 색상 전환입니다(도넛 모양과 색상 원과 유사합니다).

기하학적 원형 변화를 생성하려면 최소한 두 가지 색상 정지점을 정의해야 합니다。

기하학적 원형 변화 예제：

예제

예제 1

세 가지 색상을 가진 기하학적 원형 변화 있습니다：

#grad {
  background-image: conic-gradient(red, yellow, green);
}

직접 시도해보세요

예제 2

다섯 가지 색상을 가진 기하학적 원형 변화 있습니다：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

직접 시도해보세요

예제 3

세 가지 색상을 사용하며 각 색상에 각도를 지정한 기하학적 원형 변화 있습니다：

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

직접 시도해보세요

예제 4

border-radius: 50% 추가로 기하학적 원형의 변화를 도넛 모양으로 보이게 합니다：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

직접 시도해보세요

예제 5

시작 각도를 가진 콘식 그래디언트：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

직접 시도해보세요

예제 6

중심 위치를 가진 콘식 그래디언트：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

직접 시도해보세요

예제 7

시작 각도와 중심 위치를 동시에 가진 콘식 그래디언트：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

직접 시도해보세요

예제 8

또 다른 원형 그래디언트 예제：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

직접 시도해보세요

CSS 문법

background-image: conic-gradient([from 각도] 위치,] 색상 각도, 색상 각도, ...);
값 설명
from 각도 선택 사항. 전체 콘식 그래디언트가 이 각도로 회전됩니다. 기본 값은 0deg입니다.
at 위치 선택 사항. 콘식 그래디언트의 중심 위치를 지정합니다. 기본 값은 center입니다.
색상 각도, ... , 색상 각도

색상 중지点是您希望在之间呈现平滑过渡的颜色。

이 값은 색상 값과 선택 사항인 중지 위치(0에서 360도 사이의 각도 또는 0%에서 100% 사이의 백분율)로 구성됩니다.

기술 세부 사항

版本： CSS3

浏览器支持

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
69 79 83 12.1 56

관련 페이지

教程：CSS 변화

참조:CSS background-image 속성

참조:CSS 선형그래디언트() 함수

참조:CSS 원형그래디언트() 함수

참조:CSS 반복콘식그래디언트() 함수

참조:CSS 반복선형그래디언트() 함수

참조:CSS repeating-radial-gradient() 함수