【網(wǎng)站】甲方說：我想要一個閃瞎但不辣眼，高端還帶漸變的......

漸變是最近大熱的設(shè)計趨勢之一，最初漸變主要運用于背景和圖片中的色彩疊加。如今在品牌和網(wǎng)站中大量的雙色調(diào)設(shè)計，引領(lǐng)了雙色調(diào)的新潮流。你看下我們公司制作的網(wǎng)站就大量用了這個漸變，不妨跟著卓成科技的小卓卓一起來了解下。

這些年我們看到了更加多樣化的漸變設(shè)計，結(jié)合多種色調(diào)、不規(guī)則形狀和模糊效果等等。漸變更多的是用于網(wǎng)頁中的次要內(nèi)容，比如懸停按鈕、標題、3D元素、icon之類。

iPhone X可以說是2018年漸變趨勢的一個經(jīng)典范例。在蘋果的網(wǎng)站登陸頁面和各種宣傳廣告中，都能看到多種色調(diào)的漸變元素被用于標題、文字和圖形中。iPhone X的主屏幕采用的漸變不是傳統(tǒng)的線性或徑向漸變，而是多種顏色的不規(guī)則混合漸變。

3D中的漸變應(yīng)用

由于環(huán)境光照的強弱不同照射到物體表面，會呈現(xiàn)光線強度漸變的效果。可以通過3D中的頂點顏色和顏色映射技術(shù)，模擬這種漸變效果，表現(xiàn)物體材質(zhì)和立體感。

漸變的種類

漸變中最常見的是線性和徑向漸變，采用不同的參數(shù)設(shè)置如角度、方向、不透明度等。而現(xiàn)在的流行漸變趨勢，是像上面的iPhoneX案例那樣，利用網(wǎng)格工具或其它方法來做出不規(guī)則的漸變樣式，比如放射漸變、網(wǎng)格漸變、四色漸變、復(fù)合漸變等等。

CSS漸變代碼

為了在CSS中創(chuàng)造出這些漸變效果，下面給大家整理了一些在線配色工具，可以拷貝和粘貼CSS代碼，也可以直接復(fù)制色值進行配色。

漸變設(shè)計案例集合

下面搜集了一些今年主流的漸變設(shè)計案例，希望能帶給你更多靈感。

看了這么多案例，不會再說漸變設(shè)計沒靈感了吧？有了想法就要及時行動，利用在線配色網(wǎng)站和工具，多去嘗試和練習(xí)吧。有不懂的，小卓卓歡迎您來“騷擾”。