這18個(gè)網(wǎng)站是我在取經(jīng)路上意外發(fā)現(xiàn)的，里面包括 純CSS 實(shí)現(xiàn)的炫酷背景，還有專(zhuān)門(mén)制作背景圖的網(wǎng)站。 算是取經(jīng)路上的大補(bǔ)之物~
? 傳送門(mén)：https://projects.verou.me/css3patterns/
如果你認(rèn)識(shí) Lea Verou 的話，大概率知道這個(gè)網(wǎng)站，她徒手寫(xiě)了幾十個(gè) 純CSS 實(shí)現(xiàn)的背景圖樣式。 網(wǎng)站上提供了她的代碼。
如果你不認(rèn)識(shí)她，那我一定要推薦你閱讀一下 《CSS揭秘（圖靈出品）》 這本書(shū)，它會(huì)讓你大受震撼！
? 傳送門(mén)：http://www.standardista.com/cssgradients/
除了 Lea Verou 的網(wǎng)站外，CSS3 Gradients 也提供了這類(lèi)示例。同樣提供代碼下載。
3. CSS Gradients with background-blend-mode? 傳送門(mén)：https://bennettfeely.com/gradients/
功能和前面兩個(gè)差不多，自己點(diǎn)開(kāi)看看唄~
4. CSS Flags? 傳送門(mén)：http://www.standardista.com/CSS3gradients/flags.html
使用 純CSS 的方式畫(huà)出多國(guó)國(guó)旗。“右鍵 - 檢查網(wǎng)頁(yè)源代碼” 可以獲取代碼。
5. Hero Patterns? 傳送門(mén)：https://heropatterns.com/
Hero Patterns 是比較出名網(wǎng)站了，官方提供了幾十款紋理，你可以根據(jù)自己的需求設(shè)置兩種對(duì)比色和不透明度。 完成后會(huì)返回一段CSS代碼給你，不過(guò)和前面幾個(gè)網(wǎng)站有點(diǎn)不同的是，Hero Patterns 的背景圖使用了 base64 的方式去實(shí)現(xiàn)的，而不是 CSS 背景漸變 的方式。
6. HUE.CSS? 傳送門(mén)：http://evankarageorgos.github.io/hue/grid.html
使用 CSS 背景漸變 的方式做出的數(shù)十款高端大氣的背景，網(wǎng)站上的所有案例都提供了代碼。
7. Pure CSS Stripes Generator? 傳送門(mén)：https://stripesgenerator.com/
Pure CSS Stripes Generator 主要是幫你生成 條紋背景 的代碼。 你可以在網(wǎng)站上根據(jù)自己的需求設(shè)置條紋的顏色、大小、傾斜角度等屬性。 最后會(huì)返回一段 css 代碼給你。
8. Glass Morphism? 傳送門(mén)：https://glassgenerator.netlify.app/
Glass Morphism 的功能是設(shè)置 毛玻璃背景 樣式，你可以在上面手動(dòng)調(diào)節(jié)毛玻璃的不透明度、模糊度、背景色等屬性。 最后會(huì)返回 html 和 css 代碼給你。 非常好玩，趕緊去試試吧~
9. uiGradients? 傳送門(mén)：https://uigradients.com/
提供了不同色系搭配的漸變代碼。如果你不太擅長(zhǎng)配色，可以使用 uiGradients
10. Gradient Colors Collection Palette? 傳送門(mén)：https://webkul.github.io/coolhue/
Gradient Colors Collection Palette 上有幾十個(gè)色卡，可以一鍵復(fù)制 css 代碼。
11. Fresh Background Gradients? 傳送門(mén)：https://webgradients.com/
Fresh Background Gradients 提供了即使個(gè)配色方案，有雙色的，也有多色的。同樣提供一鍵復(fù)制 css 代碼。
12. Cool Backgrounds? 傳送門(mén)：https://coolbackgrounds.io/
可以生成 5種類(lèi)型 的背景圖片，并且提供多套成熟的配色方案供你選擇。 但該網(wǎng)站生成的是背景圖片，不是代碼。
13. Svg Wave? 傳送門(mén)：https://svgwave.in/
生成波浪背景圖，可以自定義波浪的幅度、顏色等屬性。 支持 SVG 和 PNG 下載。
14. Subtle Patterns? 傳送門(mén)：https://www.toptal.com/designers/subtlepatterns/
提供了幾十種紋理圖。
15. Stripe Generator? 傳送門(mén)：http://www.stripegenerator.com/
可配置的條紋背景圖片。
16. ZenBG? 傳送門(mén)：https://galactic.ink/bg/
在線設(shè)置紋理背景和漸變顏色，最后融合在一起生成一張好看的圖片。 同時(shí)還提供 css 代碼給你參考，告訴你如何更好的使用這張圖片。
17. Patterninja? 傳送門(mén)：https://patterninja.com/
光看圖片介紹就知道這個(gè)網(wǎng)站好好玩。 Patterninja 幫你生成可平鋪的背景圖。
18. The Pattern Library? 傳送門(mén)：http://thepatternlibrary.com/
提供幾十款可平鋪的好看背景。 注意：下載按鈕在網(wǎng)頁(yè)的左上角。
