--- theme: smartblue --- 这18个网站是我在取经路上意外发现的，里面包括 **纯CSS** 实现的炫酷背景，还有专门制作背景图的网站。算是取经路上的大补之物~

# 1. CSS3 Patterns Gallery [🎗️ 传送门：『CSS3 Patterns Gallery』](https://projects.verou.me/css3patterns/)
如果你认识 [Lea Verou](https://lea.verou.me/) 的话，大概率知道这个网站，她徒手写了几十个 **纯CSS** 实现的背景图样式。网站上提供了她的代码。
如果你不认识她，那我一定要推荐你阅读一下 [《CSS揭秘（图灵出品）》](https://u.jd.com/vdxudWZ) 这本书，它会让你大受震撼！
![01.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b6890794c554aa6aefbba06ed0d30ea~tplv-k3u1fbpfcp-watermark.image?)

# 2. CSS3 Gradients [🎗️ 传送门：『CSS3 Gradients』](http://www.standardista.com/cssgradients/)
除了 [Lea Verou](https://lea.verou.me/) 的网站外，[CSS3 Gradients](http://www.standardista.com/cssgradients/) 也提供了这类示例。同样提供代码下载。
![02.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ca7d869af1c4e869283f990e6890b3a~tplv-k3u1fbpfcp-watermark.image?)

# 3. CSS Gradients with background-blend-mode [🎗️ 传送门：『CSS Gradients with background-blend-mode』](https://bennettfeely.com/gradients/)
功能和前面两个差不多，自己点开看看呗~
![04.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5eedc1e3d92f46d887cb4b71e1d8fdf7~tplv-k3u1fbpfcp-watermark.image?)

# 4. CSS Flags [🎗️ 传送门：『CSS Flags』](http://www.standardista.com/CSS3gradients/flags.html)
使用 **纯CSS** 的方式画出多国国旗。**“右键 - 检查网页源代码”** 可以获取代码。
![03.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22ab7ac925704d81b8c6b18e1e01d1cd~tplv-k3u1fbpfcp-watermark.image?)

# 5. Hero Patterns [🎗️ 传送门：『Hero Patterns』](https://heropatterns.com/)
[Hero Patterns](https://heropatterns.com/) 是比较出名网站了，官方提供了几十款纹理，你可以根据自己的需求设置两种对比色和不透明度。完成后会返回一段CSS代码给你，不过和前面几个网站有点不同的是，[Hero Patterns](https://heropatterns.com/) 的背景图使用了 `base64` 的方式去实现的，而不是 **CSS 背景渐变** 的方式。
![05.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/228689de7c594321bcf84e2fc759d499~tplv-k3u1fbpfcp-watermark.image?)

# 6. HUE.CSS [🎗️ 传送门：『HUE.CSS』](http://evankarageorgos.github.io/hue/grid.html)
使用 **CSS 背景渐变** 的方式做出的数十款高端大气的背景，网站上的所有案例都提供了代码。
![06.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c71061df1d944389c6733734bd0d93a~tplv-k3u1fbpfcp-watermark.image?)

# 7. Pure CSS Stripes Generator [🎗️ 传送门：『Pure CSS Stripes Generator』](https://stripesgenerator.com/)
[Pure CSS Stripes Generator](https://stripesgenerator.com/) 主要是帮你生成 **条纹背景** 的代码。你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。最后会返回一段 `css` 代码给你。
![07.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48b38c9d3f4e40b098a2f07fe5d3ce45~tplv-k3u1fbpfcp-watermark.image?)

# 8. Glass Morphism [🎗️ 传送门：『Glass Morphism』](https://glassgenerator.netlify.app/)
[Glass Morphism](https://glassgenerator.netlify.app/) 的功能是设置 **毛玻璃背景** 样式，你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。最后会返回 `html` 和 `css` 代码给你。非常好玩，赶紧去试试吧~
![08.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78660c6d6e8f4c4e83a1364d206cf955~tplv-k3u1fbpfcp-watermark.image?)

# 9. uiGradients [🎗️ 传送门：『uiGradients』](https://uigradients.com/)
提供了不同色系搭配的渐变代码。如果你不太擅长配色，可以使用 [uiGradients](https://uigradients.com/)
![09.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3103448b9992446fa1cbd706f7031d1d~tplv-k3u1fbpfcp-watermark.image?)

# 10. Gradient Colors Collection Palette [🎗️ 传送门：『Gradient Colors Collection Palette』](https://webkul.github.io/coolhue/)
[Gradient Colors Collection Palette](https://webkul.github.io/coolhue/) 上有几十个色卡，可以一键复制 `css` 代码。
![10.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a337b6b95ec64085a31171cf5e583619~tplv-k3u1fbpfcp-watermark.image?)

# 11. Fresh Background Gradients [🎗️ 传送门：『Fresh Background Gradients』](https://webgradients.com/)
[Fresh Background Gradients](https://webgradients.com/) 提供了即使个配色方案，有双色的，也有多色的。同样提供一键复制 `css` 代码。
![11.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30b0ac1d5a0144cbae124c5ed6572b80~tplv-k3u1fbpfcp-watermark.image?)

# 12. Cool Backgrounds [🎗️ 传送门：『Cool Backgrounds』](https://coolbackgrounds.io/)
可以生成 **5种类型** 的背景图片，并且提供多套成熟的配色方案供你选择。但该网站生成的是背景图片，不是代码。
![12.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3abf5c750e754872bba2060de37e2aa4~tplv-k3u1fbpfcp-watermark.image?)

# 13. Svg Wave [🎗️ 传送门：『Svg Wave』](https://svgwave.in/)
生成波浪背景图，可以自定义波浪的幅度、颜色等属性。支持 `SVG` 和 `PNG` 下载。
![13.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c04e35834de42e4a2189d7ba4960e24~tplv-k3u1fbpfcp-watermark.image?)

# 14. Subtle Patterns [🎗️ 传送门：『Subtle Patterns』](https://www.toptal.com/designers/subtlepatterns/)
提供了几十种纹理图。
![14.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/559093c4ab354d3d9159d2bebf19fdb7~tplv-k3u1fbpfcp-watermark.image?)

# 15. Stripe Generator [🎗️ 传送门：『Stripe Generator』](http://www.stripegenerator.com/)
可配置的条纹背景图片。
![15.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1952c69dec8d4e8d83b5af41025084d6~tplv-k3u1fbpfcp-watermark.image?)

# 16. ZenBG [🎗️ 传送门：『ZenBG』](https://galactic.ink/bg/)
在线设置纹理背景和渐变颜色，最后融合在一起生成一张好看的图片。同时还提供 `css` 代码给你参考，告诉你如何更好的使用这张图片。
![16.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28dbf836b4ce459bb11ea4c70a5b6cb7~tplv-k3u1fbpfcp-watermark.image?)

# 17. Patterninja [🎗️ 传送门：『Patterninja』](https://patterninja.com/)
光看图片介绍就知道这个网站好好玩。 [Patterninja](https://patterninja.com/) 帮你生成**可平铺**的背景图。
![17.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6614f9a73d1148688892350236c5ed2e~tplv-k3u1fbpfcp-watermark.image?)

# 18. The Pattern Library [🎗️ 传送门：『The Pattern Library』](http://thepatternlibrary.com/)
提供几十款可**平铺**的好看背景。注意：下载按钮在网页的左上角。
![18.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9bb6829b1a1046ebab04804b37b18b57~tplv-k3u1fbpfcp-watermark.image?)