📌 linear-gradient()
: 수직 그라데이션
- 보통 background(background-image)에서 많이 사용
linear-gradient(각도(방향), 색상1 (색상 정도), 색상2 (색상 정도)...);
- 그라데이션 방향: to top(0deg), to bottom(180deg), to left(270deg), to right(90deg)
See the Pen linear by nadia kwon (@nadia-kwon) on CodePen.
* 이미지와 함께 사용 시 이미지(url)를 먼저 선언해야 한다.
- background: url(), linear-gradient(); 순으로 선언
/* 이미지 위에 45도 각도로 그라데이션 설정 */
background-image: url(../images/bg_flower.png), linear-gradient(45deg, #aaa 0%, #ccc 30%, #eee 50%, #fff 100%);
📌 radial-gradient()
: 원 그라데이션
- closest-corner: 그라데이션의 중심에서 가장 가까운 모서리와 만남
- closest-side: 그라데이션의 중심에서 가장 가까운 상자의 면과 만남
- farthest-side: closest-side와 반대로 작동
.login {
background-image: radial-gradient(circle at right top, var(--orange-100), var(--orange-200));
}
See the Pen radial by nadia kwon (@nadia-kwon) on CodePen.
📌 repeating-linear-gradient()
: 반복 선형 그라데이션
See the Pen repeating linear by nadia kwon (@nadia-kwon) on CodePen.
참고
linear-gradient() - CSS: Cascading Style Sheets | MDN
linear-gradient() CSS 함수는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 <gradient> 데이터 유형의 객체이며, 이는 <image>의 특별한 종류 중
developer.mozilla.org
그래디언트 | web.dev
이 모듈에서는 CSS에서 제공되는 다양한 유형의 그래디언트를 사용하는 방법을 알아봅니다. 그래디언트는 그래픽 애플리케이션을 사용하여 이미지를 만들지 않고도 여러 유용한 효과를 만드는
web.dev
repeating-linear-gradient() - CSS: Cascading Style Sheets | MDN
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire c
developer.mozilla.org