学习
实践
活动
工具
TVP
写文章
专栏首页前端数据可视化这18个网站能让你的页面背景炫酷起来

这18个网站能让你的页面背景炫酷起来


这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』

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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://juejin.cn/user/2673620576140030/posts复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 纯CSS 毛玻璃效果 💎

    如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。

    德育处主任
  • 8个绝招,教你快速打造作品的全栈设计感

    1、色彩舒适度 ? 我们都说“一见钟情”,人眼首先看到的,是事物的颜色,其次才是形状。所以,“色彩舒适度”决定了作品是否能在第一时间吸引用户,我们需要避免: ·...

    BestSDK
  • 纯CSS 红砖背景墙

    在很多很多年前,我购买了《CSS揭秘》这本书,在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》,里面的每个例子都让我拍案叫绝。

    德育处主任
  • 导航设计的15个原则

    为用户导航是每一位网站和app设计者的首要职责。毕竟用户一旦迷路,再炫酷的动效、再有趣的内容也都毫无意义。即使我们的网站和app中有搜索功能,也不能把搜索框当成...

    晓吾
  • 用CSS让你的文字更有文艺范

    桃翁
  • 超实用PPT配色技巧,帮你高效完成配色

    完成一套美观合格的PPT,除了逻辑和版式,还有就是配色。配色看似简单,却有一些不可逾越必须遵循的秘籍。今天iSlide这篇配色秘籍,全都来自实战经验,非常好上手...

    纸醉金迷i
  • 10个最新交互式Web设计实例欣赏

    如今,越来越多的UX/UI设计师将交互/动画元素(例如鼠标悬停状态,音频或视频媒体,滚动交互等等)添加到其网站设计之中。这样一方面可以使网站本身更加绚丽有趣,吸...

    用户1372273
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • 程序员必备狂拽炫酷吊炸天的动效神器

    薛定喵君
  • 装上这几个Intellij idea插件,保证让你爱上写代码

    程序员都知道写代码是一件低调又枯燥的事情,一天到晚盯着电脑屏幕看。怎么能让写代码变成一件酷炫的事情,那就从装扮编辑器开始。

    一灯架构
  • 如此牛b的背景特效,你确定不想要?

    particles.js用来在 web 中创建炫酷的浮动粒子特效。它调用的粒子动画效果,让网页背景更有科技感。颜色还可以任意切换哦。

    前端实验室
  • 再见Xshell!这个开源的终端工具更酷炫!

    我工作中用的最多的工具之一就是「终端连接工具」了,因为经常和 Linux 服务器打交道,经常在上面跑代码、排查系统问题等等。

    小林coding
  • 【案例】Canvas酷炫3D拖动圆点动画特效

    今天段老师给同学们分享的是html5基于canvas制作酷炫拖动的3D圆点粒子背景动画特效。

    用户1730674
  • 十套充满逼格的css动画交互设计!UI看了都自愧不如

    对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少

    前端实验室
  • 10 款 Web 开发最佳的 Python 框架

    使用Carbon增加源代码截图。将代码粘贴到文本区域并自定义颜色主题,背景和窗口框架。一旦准备好,您就可以下载照片并感觉像摇滚明星。至少那是我们书呆子想象的方式...

    开发者技术前线
  • 谁来拯救你 我的屁屁踢

    审美的重要性 美究竟有没有一个标准这里不敢讨论。但是在长期的实践当中,人们大体总结出了一些形式美的规律,比如平衡、对称、对比、统一、变化以及黄金分割等。 做好P...

    生信技能树

扫码关注腾讯云开发者

领取腾讯云代金券