在網(wǎng)頁設(shè)計中使用漸變的趨勢時有發(fā)過好幾次。如果你瀏覽了這些年來網(wǎng)頁設(shè)計趨勢的各種列表，你會發(fā)現(xiàn)經(jīng)常包含很多種漸變。多年來，它們在網(wǎng)頁設(shè)計中的使用方式已經(jīng)從我們現(xiàn)在認為俗氣的方式發(fā)展到極富想象力和美觀的方式。

在本文中，我們將研究Web設(shè)計中一些啟發(fā)性的漸變用法，并提供一些可用于創(chuàng)建自己的漸變色的工具，以及一些免費的漸變圖像網(wǎng)址。

1、實時游戲分析的登陸頁面

在此網(wǎng)站模型中，使用美麗的紫色到粉紅色到珊瑚混合的背景漸變，并結(jié)合前景漸變和匹配的矢量插圖，提供了一種獨特而新穎的技術(shù)。

2、X字母標志設(shè)計

三維徽標設(shè)計采用了淺褐色至幾乎橙色的漸變色，使其具有豐富的深度和優(yōu)雅感。

3、在懸停和過渡中

將鼠標懸停在這個屢獲殊榮的網(wǎng)站中的元素上，即可看到在黑色背景上彈出的令人驚嘆的動畫漸變。單擊菜單以顯示神奇的漸變動畫！

https://ruya.digital/

4、漸變點+徑向彩虹漸變

如屏幕截圖所示，該網(wǎng)站使用鮮艷的多色漸變背景，并在不那么顯眼的位置使用漸變作為配對。

https://www.synesthesia.world/de

5、具有漸變Blob動畫的漸變背景

這個令人驚嘆的網(wǎng)站充滿了明亮多彩的漸變背景，并帶有一些非?？岬膭赢嫞ㄔ谄聊簧弦苿拥恼吵頋u變斑點。

https://elje-group.com/

6、背景和形狀

在背景中有趣地使用漸變，并在網(wǎng)站的每個面板上設(shè)置各種形狀的動畫，所有這些都設(shè)置為內(nèi)容的背景。

https://www.playup.com.ar/

7、漸變背景

該網(wǎng)站使用明亮的漸變背景來照亮頁面，并為將內(nèi)容帶到最前沿提供了豐富多彩的基礎(chǔ)。

https://www.roninamsterdam.com/

8、對角頭漸變

Stripe在標題中使用對角線背景漸變來增加深度，并設(shè)置舞臺以匹配對角線內(nèi)容，從而實現(xiàn)不同而又醒目的設(shè)計。

https://stripe.com/zh-cn-us

9、整個漸變

在整個頁面中，該網(wǎng)站利用背景和前景插圖中的漸變，形狀動畫以及更聰明和更豐富多彩的方法。

https://www.atomic.ie/dna/manifesto/

10、漸變標題逐漸變?yōu)榘咨?/span>

該樣機在標題中使用了柔和的顏色漸變背景和形狀，這些顏色和形狀平滑地淡化為主要內(nèi)容的白色，從而提供了清晰、舒緩的陳述。

11、漸變圖像網(wǎng)址

你可以用下面的網(wǎng)址來創(chuàng)建自己的漸變，這些是提供漸變靈感和調(diào)色板的集合。

https://cssgradient.io/

https://uigradients.com/

http://khroma.co/train/

https://webgradients.com/

https://mycolor.space/gradient

https://uigradients.com/

https://www.grabient.com/

https://webkul.github.io/coolhue/

作者：ShotStash

原文地址：https://shotstash.com/inspirational-gradients-in-web-design/

翻譯：Tzw_n