• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 원형 그라데이션

원형 그라데이션은 색상이 중심에서 바깥쪽으로 방사형으로 변하는 효과를 생성합니다. 이 그라데이션은 기본적으로 원형으로 진행되며, radial-gradient 함수를 사용하여 정의합니다. 이 함수는 여러 색상과 위치를 지정할 수 있으며, 다양한 형태의 그라데이션을 생성할 수 있습니다.

기본형

.CSS_네모박스1 {
	width: 300px;
	height: 300px;
	background: radial-gradient(#e66465, #9198e5);
}

radial-gradient(#e66465, #9198e5): 이 속성은 두 가지 색상, #e66465와 #9198e5를 사용하여 원형 그라데이션을 만듭니다. 그라데이션은 중심에서 시작하여 바깥쪽으로 점진적으로 색상이 변합니다.

• #e66465: 그라데이션의 중심 색상
• #9198e5: 그라데이션의 가장자리 색상

closest-side

.CSS_네모박스2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}

radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c):

• closest-side: 그라데이션의 시작과 끝을 가장 가까운 사이드에 맞춥니다. 즉, 원형 그라데이션의 경계가 박스의 가장자리에 닿도록 설정합니다.
• #3f87a6: 그라데이션의 중심 색상
• #ebf8e1: 중간 색상
• #f69d3c: 그라데이션의 가장자리 색상

ellipse at

.CSS_네모박스3 {
	width: 300px;
	height: 300px;
	background: radial-gradient(ellipse at top, #e66465, transparent),
							radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}

radial-gradient(ellipse at top, #e66465, transparent):

• ellipse at top: 그라데이션이 타원형으로 설정되며, 박스의 상단에서 시작합니다.
• #e66465: 타원형 그라데이션의 중심 색상
• transparent: 바깥쪽으로 갈수록 색상이 투명해집니다.