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


1. CSS3 Patterns Gallery

️ 传送门:『CSS3 Patterns Gallery』


如果你意识 Lea Verou 的话,大概率晓得这个网站,她徒手写了几十个 纯CSS 实现的背景图款式。
网站上提供了她的代码。


如果你不意识她,那我肯定要举荐你浏览一下 《CSS揭秘(图灵出品)》 这本书,它会让你大受震撼!



2. CSS3 Gradients

️ 传送门:『CSS3 Gradients』


除了 Lea Verou 的网站外,CSS3 Gradients 也提供了这类示例。同样提供代码下载。



3. CSS Gradients with background-blend-mode

️ 传送门:『CSS Gradients with background-blend-mode』


性能和后面两个差不多,本人点开看看呗~



4. CSS Flags

️ 传送门:『CSS Flags』


应用 纯CSS 的形式画出多国国旗。“右键 - 查看网页源代码” 能够获取代码。



5. Hero Patterns

️ 传送门:『Hero Patterns』


Hero Patterns 是比拟闻名网站了,官网提供了几十款纹理,你能够依据本人的需要设置两种对比色和不透明度。
实现后会返回一段CSS代码给你,不过和后面几个网站有点不同的是,Hero Patterns 的背景图应用了 base64 的形式去实现的,而不是 CSS 背景突变 的形式。



6. HUE.CSS

️ 传送门:『HUE.CSS』


应用 CSS 背景突变 的形式做出的数十款高端大气的背景,网站上的所有案例都提供了代码。



7. Pure CSS Stripes Generator

️ 传送门:『Pure CSS Stripes Generator』


Pure CSS Stripes Generator 次要是帮你生成 条纹背景 的代码。
你能够在网站上依据本人的需要设置条纹的色彩、大小、歪斜角度等属性。
最初会返回一段 css 代码给你。



8. Glass Morphism

️ 传送门:『Glass Morphism』


Glass Morphism 的性能是设置 毛玻璃背景 款式,你能够在下面手动调节毛玻璃的不透明度、含糊度、背景色等属性。
最初会返回 htmlcss 代码给你。
十分好玩,连忙去试试吧~



9. uiGradients

️ 传送门:『uiGradients』


提供了不同色系搭配的突变代码。如果你不太善于配色,能够应用 uiGradients



10. Gradient Colors Collection Palette

️ 传送门:『Gradient Colors Collection Palette』


Gradient Colors Collection Palette 上有几十个色卡,能够一键复制 css 代码。



11. Fresh Background Gradients

️ 传送门:『Fresh Background Gradients』


Fresh Background Gradients 提供了即便个配色计划,有双色的,也有多色的。同样提供一键复制 css 代码。



12. Cool Backgrounds

️ 传送门:『Cool Backgrounds』


能够生成 5种类型 的背景图片,并且提供多套成熟的配色计划供你抉择。
但该网站生成的是背景图片,不是代码。



13. Svg Wave

️ 传送门:『Svg Wave』


生成波浪背景图,能够自定义波浪的幅度、色彩等属性。
反对 SVGPNG 下载。



14. Subtle Patterns

️ 传送门:『Subtle Patterns』


提供了几十种纹理图。



15. Stripe Generator

️ 传送门:『Stripe Generator』


可配置的条纹背景图片。



16. ZenBG

️ 传送门:『ZenBG』


在线设置纹理背景和突变色彩,最初交融在一起生成一张难看的图片。
同时还提供 css 代码给你参考,通知你如何更好的应用这张图片。



17. Patterninja

️ 传送门:『Patterninja』


光看图片介绍就晓得这个网站好好玩。
Patterninja 帮你生成可平铺的背景图。



18. The Pattern Library

️ 传送门:『The Pattern Library』


提供几十款可平铺的难看背景。
留神:下载按钮在网页的左上角。








点赞 + 关注 + 珍藏 = 学会了