这18个网站能让你的页面背景炫酷起来
1。CSS3PatternsGallery
这18个网站是我在取经路上意外发现的,里面包括纯CSS实现的炫酷背景,还有专门制作背景图的网站。算是取经路上的大补之物
传送门:https:projects。verou。mecss3patterns
如果你认识LeaVerou的话,大概率知道这个网站,她徒手写了几十个纯CSS实现的背景图样式。网站上提供了她的代码。
如果你不认识她,那我一定要推荐你阅读一下《CSS揭秘(图灵出品)》这本书,它会让你大受震撼!
2。CSS3Gradients
传送门:http:www。standardista。comcssgradients
除了LeaVerou的网站外,CSS3Gradients也提供了这类示例。同样提供代码下载。
3。CSSGradientswithbackgroundblendmode
传送门:https:bennettfeely。comgradients
功能和前面两个差不多,自己点开看看呗
4。CSSFlags
传送门:http:www。standardista。comCSS3gradientsflags。html
使用纯CSS的方式画出多国国旗。右键检查网页源代码可以获取代码。
5。HeroPatterns
传送门:https:heropatterns。com
HeroPatterns是比较出名网站了,官方提供了几十款纹理,你可以根据自己的需求设置两种对比色和不透明度。完成后会返回一段CSS代码给你,不过和前面几个网站有点不同的是,HeroPatterns的背景图使用了base64的方式去实现的,而不是CSS背景渐变的方式。
6。HUE。CSS
传送门:http:evankarageorgos。github。iohuegrid。html
使用CSS背景渐变的方式做出的数十款高端大气的背景,网站上的所有案例都提供了代码。
7。PureCSSStripesGenerator
传送门:https:stripesgenerator。com
PureCSSStripesGenerator主要是帮你生成条纹背景的代码。你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。最后会返回一段css代码给你。
8。GlassMorphism
传送门:https:glassgenerator。netlify。app
GlassMorphism的功能是设置毛玻璃背景样式,你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。最后会返回html和css代码给你。非常好玩,赶紧去试试吧
9。uiGradients
传送门:https:uigradients。com
提供了不同色系搭配的渐变代码。如果你不太擅长配色,可以使用uiGradients
10。GradientColorsCollectionPalette
传送门:https:webkul。github。iocoolhue
GradientColorsCollectionPalette上有几十个色卡,可以一键复制css代码。
11。FreshBackgroundGradients
传送门:https:webgradients。com
FreshBackgroundGradients提供了即使个配色方案,有双色的,也有多色的。同样提供一键复制css代码。
12。CoolBackgrounds
传送门:https:coolbackgrounds。io
可以生成5种类型的背景图片,并且提供多套成熟的配色方案供你选择。但该网站生成的是背景图片,不是代码。
13。SvgWave
传送门:https:svgwave。in
生成波浪背景图,可以自定义波浪的幅度、颜色等属性。支持SVG和PNG下载。
14。SubtlePatterns
传送门:https:www。toptal。comdesignerssubtlepatterns
提供了几十种纹理图。
15。StripeGenerator
传送门:http:www。stripegenerator。com
可配置的条纹背景图片。
16。ZenBG
传送门:https:galactic。inkbg
在线设置纹理背景和渐变颜色,最后融合在一起生成一张好看的图片。同时还提供css代码给你参考,告诉你如何更好的使用这张图片。
17。Patterninja
传送门:https:patterninja。com
光看图片介绍就知道这个网站好好玩。Patterninja帮你生成可平铺的背景图。
18。ThePatternLibrary
传送门:http:thepatternlibrary。com
提供几十款可平铺的好看背景。注意:下载按钮在网页的左上角。