---
# System prepended metadata

title: DAY15 - linear gradient / 漸層背景顏色效果
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / CSS3']

---

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

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

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

```
// HTML

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

- 加入 linear-gradient 語法:

![](https://i.imgur.com/xOBaP6D.png)


```
// CSS

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


---

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

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

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

```

![](https://i.imgur.com/8FgvEW4.jpg)

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