배경에 원형 그라데이션 효과 넣기(radial-gradient)

배경에 원형 그라데이션 효과 넣기 (radial-gradient)

CSS의 radial-gradient() 함수를 사용하면 배경에 원형 그라데이션 효과를 쉽게 추가할 수 있습니다. 이 함수는 원의 중심에서부터 시작하여 안쪽으로 컬러를 점진적으로 변화시키는 그라데이션을 생성합니다.

사용법

radial-gradient() 함수는 다음과 같은 구문을 가지고 있습니다:

radial-gradient([shape at size], color-stop1, color-stop2, ...);

• shape : 중심에 위치한 원의 형태를 정의합니다. 기본값은 circle입니다.
• at : 원의 중심 위치를 지정합니다. 기본값은 center입니다.
• size : 원의 크기를 정의하는데, 키워드(예: closest-side, farthest-corner) 또는 길이 (예: 10px, 50%)를 사용할 수 있습니다. 기본값은 farthest-corner입니다.
• color-stop : 그라데이션의 각 색상과 해당 색상이 나타나는 위치를 지정합니다. 색상을 더하고 해당 위치를 나타내기 위해 ,로 구분해 사용합니다.

예시

다음은 배경에 원형 그라데이션 효과를 적용하는 예시입니다:

body {
  background: radial-gradient(circle at center, #ff0000, #0000ff);
}

• 원형 그라데이션은 원의 중심에서 시작하여 컬러가 점점 변화합니다.
• circle 키워드를 사용하여 원의 형태를 지정하였고, center 키워드로 원의 중심 위치를 지정했습니다.
• #ff0000 색상에서 시작하여 #0000ff 색상까지 그라데이션 색상을 설정하였습니다.

브라우저 호환성

radial-gradient() 함수는 모든 주요 브라우저에서 지원됩니다. 하지만, 오래된 버전의 IE에서는 지원되지 않으므로 주의해야 합니다. 이 경우, alternative solution이나 플러그인을 사용해야 할 수 있습니다.

이제 radial-gradient() 함수를 사용하여 원형 그라데이션 효과를 배경에 추가할 수 있습니다. 이 함수는 다양한 모양과 위치, 크기의 그라데이션을 생성할 수 있으므로, 창의력을 발휘하여 웹 디자인에 활용해보세요!