[HTML/CSS] 배경에 원형 그라데이션 효과 넣기(radial-gradient)

그라데이션(Gradient) 효과는 여러 색상을 서서히 혼합하여 부드러운 색상 전환 효과를 만드는 것으로 크게 선형 그라데이션, 원형 그라데이션 두 가지 형태로 나뉩니다. 이 중 이번 포스팅에서는 원형 그라데이션을 넣는 방법에 대해 알아보겠습니다. CSS3에서는 radial-gradient 함수를 활용하여 선형 그라데이션을 넣을 수 있습니다.

 

 원형 그라데이션 만들기 (radial-gradient) 

원형 그라데이션은 색상이 가운데 중심에서부터 원이나 타원의 형태로 바깥으로 색상이 변하는 형태를 말하며 radial-gradient() 함수를 사용하면 배경에 원형 그라데이션을 적용할 수 있습니다.

 

radial-gradient 사용법

radial-gradient([최종모양] [크기] at [위치], color1, color2, color3 ...)

• 모양 : 원 모양인지 타원 모양인지 정합니다.
• 크기 : 크기를 정합니다.
• 위치 : 중심의 위치를 정합니다.
• color : 색을 정합니다.

 

See the Pen 그라데이션4 by wjdxo513 (@wjdxo513) on CodePen.

 

기본적인 형태의 원형 그라데이션을 만들 고 싶다면 위의 예제처럼 radial-gradient에 조합할 색상을 넣으시면 됩니다. 내부의 중심에서부터 입력한 색상에 맞게 그라데이션이 펼쳐집니다.

 

 

원형 그라데이션 모양 설정

• circle : 원형
• ellipse : 타원형

 

See the Pen 그라데이션5 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제는 첫번쨰는 원형(circle)으로, 두 번째는 타원형(ellipse)으로 구성한 그라데이션입니다. 위의 예제와 같이 어떤 모양을 설정하느냐에 따라 동심원을 그리며 바깥 방향으로 색상이 바뀌는 형태를 설정할 수 있습니다. 아무것도 설정하지 않으면 원형(circle)으로 지정됩니다.

 

 

원형 그라데이션 시작 위치 설정

See the Pen 그라데이션 8 by wjdxo513 (@wjdxo513) on CodePen.

 

그라데이션이 시작하는 원의 중심도 지정할 수 있습니다. 모양, 크기 속성 다음에 at 키워드와 함께 위치값을 넣어주시면 됩니다. 위치값은 (가로, 세로) 개념이며 백분율로 표기합니다. 위치값을 모두 생략하면 가운데 (center)로 인식합니다.

 

 

원형 그라데이션 색상 배분

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

원형 그라데이션의 색상 배분도 가능합니다. 색상 옆에 % 키워드를 사용해서 색상 범위를 지정하시면 되며 위의 예제대로 하신다면  중심에서 10% 까지는 white, 30%까지는 blue, 나머지는 black 색상으로 채워지겠네요. 

 

※ 선형 그라데이션에 대해 궁금하시다면 아래 글을 참고해 주세요.

[HTML/CSS] 배경에 선형 그라데이션 효과 넣기(linear-gradient)