Home
CSS
CSS 실전 예제

원형 그라데이션 효과 - radial-gradient

색상이 직선 형태로 바뀌는 것이 선형 그러데이션이라면 원형 그러데이션은 원이나 타원이 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. 따라서 원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 합니다.

색상이 직선 형태로 바뀌는 것이 선형 그러데이션이라면 원형 그러데이션은 원이나 타원이 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. 따라서 원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 합니다.

radial-gradient

radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다.

 

기본형

background : radial-gradient( shape | size | at position, color1, color2, .., color3 );
  • shape : 원 모양인지 타원 모양인지 정합니다.
  • size : 크기를 정합니다.
  • position : 중심의 위치를 정합니다.
  • color : 색을 정합니다.

 

예제

예제 1

  • 아래의 예제로 하나씩 알아보겠습니다.
  • 노란색, 초록색, 검정색으로 변하는 원형 그라데이션입니다.
<div class="box"></div>
.box {
  margin: 0px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient( yellow, green, black );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

  • 색 뒤에 길이를 넣어서 색상 중지 점(color-stop)을 정하면 색이 차지하는 범위를 조절할 수 있습니다. 
.box {
  margin: 0px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient( yellow 10%, green 62.5px, black 50% );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 3

  • 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있습니다.
  • 원일 때는 circle, 타원일 때는 ellipse를 입력합니다.
  • 타원 모양의 ellipse가 기본값이므로, 값이 지정하지 않으면 타원 모양이 적용됩니다. 
.box {
  margin: 0px auto;
  width: 100%;
  height: 150px;
  background: radial-gradient( ellipse, yellow, green, black );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 4

  • 직사각형에서도 원 모양으로 그라데이션을 만들려면 circle를 입력합니다.
.box {
  margin: 0px auto;
  width: 100%;
  height: 150px;
  background: radial-gradient( circle, yellow, green, black );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 5

  • 중심의 위치를 바꿉니다.
.box {
  margin: 0px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient( at 30% 20%, yellow, green, black );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 6

  • farthest-corner : 중심에서 가장 먼 코너에 그라데이션을 닿게 합니다. 기본 값입니다.
  • farthest-side : 중심에서 가장 먼 사이드에 그라데이션을 닿게 합니다.
  • closest-corner : 중심에서 가장 가까운 코너에 그라데이션을 닿게 합니다.
  • closest-side : 중심에서 가장 가까운 사이드에 그라데이션을 닿게 합니다. 
.fc {
  background: radial-gradient( farthest-corner at 30% 40%, yellow, green, black );
}
.fs {
  background: radial-gradient( farthest-side at 30% 40%, yellow, green, black );
}
.cc {
  background: radial-gradient( closest-corner at 30% 40%, yellow, green, black );
}
.cs{
  background: radial-gradient( closest-side at 30% 40%, yellow, green, black );
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment