Gitsunmin

TIL

TIL
(=Today I Learned)

Conic Gradient

설명

Conic Gradient는 CSS함수로서, 지정한 중심점을 기준으로 회전하며 색상 전환의 그라디언트를 만들어줍니다.

문법

<conic-gradient()> = 
  conic-gradient( [ [ from <angle> ]? [ at <position> ]? ]  ||
  <color-interpolation-method> , <angular-color-stop-list> )  

<position> = 
  [ left | center | right ] || [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb         |
  srgb-linear  |
  lab          |
  oklab        |
  xyz          |
  xyz-d50      |
  xyz-d65      

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<angular-color-stop> = 
  <color>              &&
  <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>

값

<angle>

회전 각도를 나타내는 값입니다. 기본값은 0deg입니다. css에서 사용되는 각도의 단위인 deg, rad, turn을 사용할 수 있습니다.

360deg = 2rad = 1turn

<position>

중심점을 나타내는 값입니다. 기본값은 center입니다. 이 position은 css의 background-position과 같은 형식으로 사용됩니다.

<color-stop-list>

색상 전환의 그라디언트를 나타내는 값입니다. 기본값은 없습니다.

<angular-color-stop-list>

생상 전환의 중간 지점을 정의하는 값입니다. 기본값은 없습니다.

예시

{
	background: conic-gradient(red, orange, yellow, green, blue);
}
{
	background: conic-gradient(from 3.1416rad at 10% 50%, #266465, #9198e5);
}

참고