# 그레디언트

## 그레디언트

### 기본 문법

첫 시작(0%)과 끝(100%)의 퍼센트는 입력하지 않아도 적용 가능

```css
body {
  background: linear-gradient( 각도(또는 방향), 시작 색상, 끝 색상 ); 
  
  /*  또는  */
  background: linear-gradient( 각도(또는 방향), 시작 색상, 중간 색상, 끝 색상 ); 
  
  /*  퍼센트 추가  */
  background: linear-gradient( 각도(또는 방향), 시작 색상 30&, 중간 색상 60%, 끝 색상 ); 
}
```

## 선형 그레디언트

```css
body {
  background: linear-gradient(90deg, #0e0f12, #f7e763);

  /* 
  90deg  : to right
  180deg : to bottom    (시작색상 → 끝 색상)
  0deg   : to top       (끝 색상 → 시작색상)
  45deg  : to top right
  -45deg : to top left 
  */

  /* [색상을 선명하게 구문지어 주고 싶다면] */

  background: linear-gradient(
    45deg,
    #ff3400 40%,
    #45d5bf 40%,
    #45d5bf 60%,
    #3a2c76 60%,
    #3a2c76
  );
}
```

## 원형 그레디언트

* 원 모양의 값 (화면 폭에 따라 원의 모양, 크기가 달라짐)
  * `circle` 정원형
  * `ellipse` 기본값(생략 가능)
* `farthest-side` 기본값  

  `closest-side` 정원형의 크기와 비슷하게 그라데이션이 나타남

```css
body {
  background: radial-gradient(#6c52da #3a2c76);

  background: radial-gradient(
    circle closest-side,
    #6c52da 25%,
    #45d5bf 25%,
    #45d5bf 50%,
    #3a2c76 50%
  );
}
```

## 배경 패턴

```css
body {
  background: url("//goo.gl/B6SfbX");
  background-size: 90px;
  /* 사이즈를 설정해서 이미지의 크기를 조정하면 패턴 형태로 나타남 */
}
```

## 오버레이 그레디언트

멀티 배경 테크닉 활용, 마크업 순서에 따라 배경 위로 올라옴

```css
body {
  background: 
    /* linear-gradient(45deg, #45d5bf, #3a2c76) 투명도가 조정되지 않았기 때문에 아래의 이미지가 보이지 않음*/ linear-gradient(
      45deg,
      hsla(12, 100%, 50%, 0.2),
      hsla(54, 90%, 68%, 0.2)
    ), url("//goo.gl/B6SfbX");
  background-size: contain, 120px;
}
```

## 멀티 그레디언트

```css
body {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0) 65.7%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.45), rgba(0, 255, 0, 0) 65.7%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.45), rgba(0, 0, 255, 0) 65.7%),
    url("//goo.gl/B6SfbX");
  background-size: 100%, 100%, 100%, 140px;

  background: 
  /* 'circle at 50% 0'(x, y) 원이 뿌려져 나가는 위치 설정 가능 */ radial-gradient(
      circle at 50% 0,
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0) 65.7%
    ), radial-gradient(
      circle at 6.7% 75%,
      rgba(0, 255, 0, 0.45),
      rgba(0, 255, 0, 0) 65.7%
    ), radial-gradient(
      circle at 93.3% 75%,
      rgba(0, 0, 255, 0.45),
      rgba(0, 0, 255, 0) 65.7%
    ), url("//goo.gl/B6SfbX");
  background-size: 100%, 100%, 100%, 140px;
}
```

## 반복 그레디언트

```css
body {
  /* [선형 그레디언트] */
  background: repeating-linear-gradient(
    45deg,
    #ff3400,
    #ff3400 10px,
    #45d5bf 10px,
    #45d5bf 20px
  );

  /* [원형 그레디언트] */
  background: repeating-radial-gradient(
    circle at 50% 15%,
    #ff3400,
    #ff3400 10px,
    #45d5bf 10px,
    #45d5bf 20px
  );
}
```

## 박스 그림자

### 기본 문법

```css
header {
  box-shadow: x y blur spread(사이즈) color;
  
  /*  또는  */
  box-shadow: x y blur color;
}
```

### 박스 그림자

박스 그림자의 x y를 0으로 설정하면 박스 사방으로 그림자가 나타나는 형태가 된다. 이를 이용해서 `<border>`와 같이 이미지의 테두리를 설정해 줄 수 있다.

```css
header {
  /* 박스 그림자 ------ */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);

  /* 박스 그림자 설정 ------ */
  box-shadow: 0 0 0 1px #3f3f3f;

  /* 박스 둥근 테두리 설정 ------ */
  /* 순서 : 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단 */
  /* width값의 50% 즉, 절반 값을 사용한다.  */
  border-radius: 170px 0 0 170px;
}

header::after {
  /* 박스 안쪽 그림자 ------ */
  box-shadow: inset 0 -5px 15px 4px rgba(0, 0, 0, 0.35);
}
```

{% hint style="warning" %}
박스 안쪽 그림자를 설정 할 때는 가상요소를 사용해서 설정한다.&#x20;
{% endhint %}

### 멀티 박스 그림자 설정

마치 이미지가 들어 올려지는 것 같은 효과를 줄 수 있다.&#x20;

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRU_J7q-BsT3fdLT1Yu%2F-MRU_WkzOjeZy31iAiVy%2Fimage.png?alt=media\&token=22560001-4401-4e2d-9def-c44738ff2380)

```css
.album-card:hover {
  transform: scale(1.05);
  box-shadow: 
  0 25px 20px -20px rgba(0, 0, 0, 0.25), 
  0 3px 15px rgba(0, 0, 0, 0.5);
}
```

### 광택(glossy) 효과 설정

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRU_J7q-BsT3fdLT1Yu%2F-MRU_hHftk89E7YfiWGU%2Fimage.png?alt=media\&token=82bf7275-6f2a-4026-a522-98aad8887acc)

```markup
<ul class="album-list">
  <li class="album-card has-gossy"></li>
</ul>
```

```css
.album-card.has-glossy::before {
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.15) 47%,
    rgba(255, 255, 255, 0.3) 47%,
    rgba(255, 255, 255, 0.3) 47.1%,
    transparent 47.1%
  );
}
```

## 참고&#x20;

* [Using CSS Gradients](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
* [선형(Linear) 그레디언트](https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient)
* [원형(Radial) 그레디언트](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient)
* [둥근 테두리(Border Radius)](https://developer.mozilla.org/ko/docs/Web/CSS/border-radius)
* [박스 그림자(Box Shadow)](https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow)
* [CSS 3D 그레디언트 (실습 시작) by codepen](https://codepen.io/hanna244/pen/gOwEQWb)
* [CSS 3D 그레디언트 (실습 완료) by codepen](https://codepen.io/hanna244/pen/oNzVQja?editors=0100)