[CSS] Gradient

 

CSS 그라디언트는 이미지 자료형의 일종으로 나타내며 두 개 이상의 색 의 그라디에이션(점진적 전환)을 표현합니다. 배경처럼 이미지를 사용하는 곳 어디에나 적용할 수 있습니다. 그리고 브라우저가 직접 생성하기때문에 확대했을때 이미지 손실이 적어 보다 높은 품질의 그래픽을 구현할 수 있습니다.

 

그라디언트는 3가지 종류의 함수 타입으로 생성할 수 있습니다.

 

• linear-gradient()
• radial-gradient()
• conic-gradient()

 

그리고 3가지 타입의 변형으로 반복하는 함수도 사용할 수 있습니다.

 

• repeating-linear-gradient()
• repeating-radial-gradient()
• repeating-conic-gradient()

 

 

 

1. linear-gradient

기본

.linear-gradient {
 	background: linear-gradient(white, blue);
}

white 로 시작해서 blue 로 끝나는 그라디언트를 간단하게 적용해 볼 수 있습니다. 방향을 지정하지 않는다면 위에서 아래방향으로 그라디언트가 그려집니다.

 

방향 설정

.linear-gradient {
	background: linear-gradient(to right, white, blue);
}

linear-gradient 함수 첫번째 파라미터로 방향을 지정할 수 있습니다. 방향은 30deg 와 같은 각도값도 입력 가능합니다. 각도를 사용할 때 0deg 는 아래에서 위쪽방향이고, 90deg 는 왼쪽에서 오른쪽 방향이며, 시계 방향으로 적용됩니다. 음의 각도는 반시계 방향으로 적용됩니다.

 

칼라 추가하기

.linear-gradient {
	background: linear-gradient(to right, red, orange, yellow, green, blue);
}

2가지 이상의 그라디에이션 색상을 지정할 수 있습니다.

 

범위지정 1

.linear-gradient {
	background: linear-gradient(to right, gray 0% 50%, blue 50% 100%);
}

색 마다 범위를 설정할 수 있습니다. gray 0~50% 에 이어서 blue 50% 로 사잇값이 공백이 없어서 그라디에이션이 그려지지 않았습니다. 그라디에이션을 채워주려면 색 범위 사이에 공백이 있어야 합니다. 범위값으로 px 이나 em 같이 크기를 표현하는 단위도 모두 사용 가능 합니다.

 

범위지정 2

.linear-gradient {
	background: linear-gradient(to right, gray 0% 30%, blue 70% 100%);
}

gray 0~30% 에 이어서 blue 70% 로 사잇값 30% ~ 70% 공백에 그라디에이션이 그려진것을 확인할 수 있습니다.

 

그라디언트 중첩

.linear-grandient-stack {
	background:
		linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
		linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
		linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

linear-gradient 여러개를 중첩해서 사용할 수 있습니다.

 

2. radial-gradient

기본

.radial-gradient {
	background: radial-gradient(white, blue);
}

white 로 중앙에서 시작해서 blue 로 끝나는 원형 그라디언트를 간단하게 적용해 볼 수 있습니다.

 

중심위치 설정

.radial-gradient {
	background: radial-gradient(at 30% 30%, white, blue);
}

radial-gradient 함수 첫번째 파라미터로 중심 위치를 지정할 수 있습니다.  왼쪽에서 30% 상단에서 30% 만큼 이동한 위치로 중심을 이동시킵니다.

 

ellipse closest-side

.radial-gradient-ellipse-closest-side {
	background: radial-gradient(ellipse closest-side, white 96%, black 96% 100%, blue 100%);
}

ellipse(타원) closest-side(면) 는 엘리먼트의 크기 맞춰 타원으로 그려줍니다.

 

ellipse farthest-corner

.radial-gradient-ellipse-farthest-corner {
	background: radial-gradient(ellipse farthest-corner, white 96%, black 96% 100%, blue 100%);
}

ellipse(타원) farthest-corner(모서리) 는 엘리먼트의 모서리에 맞춰 타원으로 그려줍니다.

 

circle closest-side

.radial-gradient-circle-closest-side {
	background: radial-gradient(circle closest-side, white 96%, black 96% 100%, blue 100%);
}

circle(정원) closest-side(면) 는 엘리먼트의 크기 맞춰 정원으로 그려줍니다.

 

circle farthest-corner

.radial-gradient-circle-farthest-corner {
	background: radial-gradient(circle farthest-corner, white 96%, black 96% 100%, blue 100%);
}

circle(정원) farthest-corner(모서리) 는 엘리먼트의 모서리에 맞춰 정원으로 그려줍니다.

 

그라디언트 중첩

.radial-gradient-stack {
	background: 
    	radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
		radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
		radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
	border-radius: 50%;
}

radial-gradient 여러개를 중첩해서 사용할 수 있습니다.

 

3. conic-gradient

기본

.conic-gradient {
	background: conic-gradient(white, blue);
}

원뿔 그라디언트로 12시 방향에서 시작해서 시계방향으로 회전하며 표현됩니다.

 

중심위치 설정

.conic-gradient {
	background: conic-gradient(at 30% 30%, white, blue);
}

radial-gradient 와 같은 방식으로 중심점을 설정할 수 있습니다.

 

각도 설정

.conic-gradient {
	background: conic-gradient(from 45deg, white, blue);
}

12 방향의 시작점을 0deg 부터 각도를 설정할 수 있습니다.

 

4. repeating-linear-gradient

기본

.repeating-linear-gradient {
	background: repeating-linear-gradient(white 0 5px, blue 5px 10px);
}

linear-gradient 는 범위를 벗어나면 마지막 색으로 채워주는 반면 repeating-linear-gradient 는 처음부터 다시 반복해서 영역을 채워줍니다.

 

방향설정

.repeating-linear-gradient {
	background: repeating-linear-gradient(45deg, white 0 5px, blue 5px 10px);
}

첫번째 파라미터 값으로 방향을 설정할 수 있습니다.

 

그라디언트 중첩

.repeating-linear-gradient {
	background: repeating-linear-gradient(45deg, transparent 0 5px, blue 5px 10px),
		repeating-linear-gradient(-45deg, transparent 0 5px, red 5px 10px);
}

repeating-linear-gradient 여러개를 중첩해서 사용할 수 있습니다.

 

5. repeating-radial-gradient

.repeating-radial-gradient {
	background: repeating-radial-gradient(white 0 5px, blue 5px 10px);
}

repeating-linear-gradient 와 같이 범위를 벗어나면 처음부터 다시 반복해서 영역을 채워줍니다.

 

6. repeating-conic-gradient

.repeating-conic-gradient {
	background: repeating-conic-gradient(at 50% 50%, white 0 3deg, blue 3deg 6deg);
}

repeating-linear-gradient 와 같이 범위를 벗어나면 처음부터 다시 반복해서 영역을 채워줍니다.

 

 

[예제] 마름모 패턴 만들기

 

1. 마름모 왼쪽 상단을 먼저 그려줍니다.

 

.rhombus {
	background: linear-gradient(135deg, blue 25%, transparent 25%);
}

 

2. 같은 방식으로 각도를 변경해서 4 모서리를 채워줍니다.

 

.rhombus {
	background: linear-gradient(135deg, blue 25%, transparent 25%),
		linear-gradient(225deg, blue 25%, transparent 25%),
		linear-gradient(45deg, blue 25%, transparent 25%),
		linear-gradient(315deg, blue 25%, transparent 25%);
}

 

3. 배경 이미지 크기를 지정해주면 나머지 빈공간에 동일 패턴으로 마름모가 채워지게 됩니다.

 

.rhombus {
	background: linear-gradient(135deg, blue 25%, transparent 25%),
		linear-gradient(225deg, blue 25%, transparent 25%),
		linear-gradient(45deg, blue 25%, transparent 25%),
		linear-gradient(315deg, blue 25%, transparent 25%);
	background-size: 10px 10px;
}

 

---

참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS 그레이디언트 사용하기 - CSS: Cascading Style Sheets | MDN

https://www.magicpattern.design/tools/css-backgrounds

CSS Background Patterns by MagicPattern