# DAY15 - linear gradient / 漸層背景顏色效果

### 我知道這段英文真的很難記住，但他真的超酷。

- 只需要兩個顏色，輕鬆製作酷炫背景:

// HTML

<div class="box"></div>

- 加入 linear-gradient 語法:


// CSS

.box {
  width: 1100px;
  height: 450px;
  
  // 漸層一般是上至下，先設定好兩塊顏色: text or 色碼
  
  background: linear-gradient(#004466, #00ff2a);
}


---

### 第三個屬性，改變漸層起始至結束方向性:

- 加入在 `linear-gradient` 屬性最前面即可:

.box {
  width: 1100px;
  height: 450px;
  
    // to 方向性: 可自己 try 看看
  background: linear-gradient(to right, #004466, #00ff2a);
}


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / CSS3`