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

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

1、實(shí)時(shí)游戲分析的登陸頁(yè)面

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

2、X字母標(biāo)志設(shè)計(jì)

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

3、在懸停和過(guò)渡中

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

https://ruya.digital/

4、漸變點(diǎn)+徑向彩虹漸變

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

https://www.synesthesia.world/de

5、具有漸變Blob動(dòng)畫(huà)的漸變背景

這個(gè)令人驚嘆的網(wǎng)站充滿了明亮多彩的漸變背景，并帶有一些非常酷的動(dòng)畫(huà)，包括在屏幕上移動(dòng)的粘稠漸變斑點(diǎn)。

https://elje-group.com/

6、背景和形狀

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

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

7、漸變背景

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

https://www.roninamsterdam.com/

8、對(duì)角頭漸變

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

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

9、整個(gè)漸變

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

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

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

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

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

你可以用下面的網(wǎng)址來(lái)創(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