在Web2.0時期，漸變已經成為一種普遍趨勢。

部分原因是它們幫助實現了3D的擬態(tài)外觀，逼真的按鈕。然而一段時間后，許多設計師對它們感到厭倦，并宣布漸變已經過時，是一種味道不好的設計。在iOS7之后，這一切又重新回到了人們的視野中，后來的Modern Design讓漸變再次成為了人們的焦點。

因為越來越受歡迎，很多設計師開始稱漸變?yōu)?"新色彩"。

第一代iPhone時代的一個擬物化按鈕，頂部有強烈的漸變、厚實的邊框、硬朗的陰影。

舊按鈕樣式

現代的漸變，不需要任何額外的裝飾，可以配合同色系的柔光影子，營造出美輪美奐的半真實感。

現代按鈕

我們喜歡自然的東西，尤其是自然界中存在的東西。需要證據嗎？你每天在你身邊看到什么？天空！天空不只是一種純色，而是一種漸變色，它取決于天氣和光線。

天空是漸變重要的來源

我們看到的大多數物體都是三維的，投射陰影。因為光線很少是均勻的，所以產生的顏色和陰影從來都不是完全平坦的，也不是只用一種顏色來填充的，它們是漸變的，這使得這種特殊的色調混合比純色更自然。它們在本質上是漸變的，這使得這種特殊的色調混合比純色更自然。

看看你周圍的日常物體。它們的性質都是漸變的，而且它們也會隨著外部光源的變化而變化。

"看看周圍。你看到的幾乎所有東西其實都是漸變的"

當我們開始選擇漸變時，必須要發(fā)現它們的兩個主要特質。

一個是創(chuàng)造深度和更明確的形狀的能力。

另一個是關于吸引眼球，并引導它到形狀的某些部分。我們的眼睛喜歡明亮、溫暖的色調，且飽和度相當高。

即使是微妙的漸變，也會讓你的按鈕更友好，更有 "點擊感"。

深度可以讓漸變+陰影組合出現在離眼睛更近的地方--這有助于理解它們背后的交互。

這并不意味著我們應該完全拋棄扁平化設計，回到前十年的擬物按鈕。兩種方法都有各自的好處和缺點，所以將兩者健康地混合起來可能是有用的。

扁平化的設計風格可以讓設計不那么雜亂，更加簡約，注重功能而不是形式。

Skeuomorphic，或者干脆說是一種更自然的設計，提醒我們，我們是在為真實的人設計，他們更喜歡他們已經知道和理解的東西。逼真的漸變可以為一個原本極簡的項目增加 "人文因素"，使其更加人性化。

漸變是兩種或多種顏色之間的過渡。這些顏色也可以有一個透明度值。你可以用它來實現一個對象相對于其背景的淡出效果。

漸變主要有三種類型。

LINEAR（線性漸變）

線性是最流行的漸變類型。正如它的名字所說，它是兩種或多種顏色的線性過渡。我們可以修改顏色本身、透明度和漸變角度。

線性漸變樣本案例

RADIAL（徑向漸變）

徑向漸變開始時，一種顏色在漸變環(huán)的中間，而另一種顏色最終在其邊緣。這種漸變最常見的是圓形漸變，過渡是沿著圓圈均勻分布的。

兩種沒有透明度的顏色通過添加高光和陰影，可以在圓圈中創(chuàng)造出3D效果。

如果漸變的兩端顏色相同，其中一端處于全透明狀態(tài)，我們最終會產生模糊或淡出的效果。

徑向漸變在非圓形的形狀上效果很好，可以為它們添加一點有機的、現實的風格。

ANGULAR（角度漸變）

角度漸變以逆時針方向繞圈。顏色之間的角度決定了過渡是雙向的（180度角）還是中間有一條尖銳的分界線（0度）。

這種類型的漸變很少是界面的好選擇。

設置在同一位置的兩種顏色之間會有一條尖銳的邊緣，而漸變則是反方向的。

兩種顏色在180度的時候，顏色之間會有一個流暢的過渡，往兩邊走。

你可以添加更多的顏色和玩轉角度，以達到一些有趣的結果。

最佳做法

如何設計一個既好看，又有意義的優(yōu)秀界面設計的漸變？要做到這一點，需要遵循一些基本規(guī)則。

兩種顏色

雙色漸變是大多數設計的最佳選擇。顏色多了，漸變就會在視覺上變得忙碌。

選擇正確的顏色

盡量搭配相似的顏色，暖色調搭配暖色調，冷色調搭配冷色調。

這樣可以幫助你避免不好的混搭（最極端的是紅色和綠色的混搭）

細微漸變

最好的漸變往往是非常微妙的，顏色之間的差別不大。這讓它們看起來更自然，也更容易上手。

漸變是按鈕和其他互動元素的流行選擇。這里有一些關于如何讓它們發(fā)光的技巧。

你幾乎可以選擇任何顏色，并從中創(chuàng)建一個漂亮的漸變。不過，如果你剛開始學習漸變，最好使用安全的方法，每次都能成功。

第一步

創(chuàng)建一個線性漸變，并在兩端使用相同的顏色。在我們的例子中，它只是從#E0C3FC到#C3C3FC的過渡。

第二步

檢查你的調色板是否處于HSBmode（色調、飽和度、亮度），并將其中一個漸變結尾的色調值減少或增加15-30。在我們的例子中，頂部的顏色的Hue值減少了30。

第三步

為了獲得更有機、更友好的效果，你可以嘗試旋轉漸變(這里是45度)或將飽和度降低10-15點。

我希望你喜歡它。

原文地址：https://medium.com/swlh/playing-with-gradients-3b3697f0e30f#

這里有一些有用的工具，可以幫助你創(chuàng)建自己的夢幻漸變：

https://cssgradient.io/gradient-backgrounds/

https://webgradients.com/