---
title: "Discussion on \"應用 CSS3 Gradients 製作漸層效果\" | Hashnode"
description: "Discussion on \"應用 CSS3 Gradients 製作漸層效果\". 以前就很喜歡背景有漸層效果的桌布，自從 CSS3 多了這個屬性，\n怎麼可以輕易放過呢 ！走過路過也千萬不可以放過啊。就不需要另外放圖片才能實現了。\n基本語法邏輯如下：\nbackground: linear-gradient(direction, color-stop1, color-stop2, ...);\n\n效果1: 不設定漸層方向屬性(direction)\n預設的狀況下，如果不設定 direction ，效果會從 color1 往下延伸到 color2\n\n.gradient {\n  back..."
url: "https://hashnode.com/posts/css3-gradients/63359ffde594fa4ba3b8c4be"
---

[Feed](https://hashnode.com/feed) /

Discussion

[Michael Luo](https://hashnode.com/@Michael0520)

Nov 15, 2020

# [應用 CSS3 Gradients 製作漸層效果](https://michael0520-blog.hashnode.dev/css3-gradients?utm_source=hashnode&utm_medium=feed)

以前就很喜歡背景有漸層效果的桌布，自從 CSS3 多了這個屬性， 怎麼可以輕易放過呢 ！走過路過也千萬不可以放過啊。就不需要另外放圖片才能實現了。 基本語法邏輯如下： background: linear-gradient(direction, color-stop1, color-stop2, ...); 效果1: 不設定漸層方向屬性(direction) 預設的狀況下，如果不設定 direction ，效果會從 color1 往下延伸到 color2 .gradient { back...

michael0520-blog.hashnode.dev 1 min read

## Responses

Markdown supported · ⌘↵ to post

No responses yet.