本文汇总了50个对前端开发者极其实用的在线工具，包括CSS默认样式查询、图片剪辑、CSS帧动画创建、新拟态UI设计、光标样式定制等，涵盖了网页布局、颜色对比度检查、社交媒体Meta Tags生成、响应式预览等多个方面，帮助提升工作效率和网站质量。
点击上方 前端瓶子君，关注公众号
回复算法，加入前端编程面试算法每日一题群
本篇译自：enlear.academy/50-tool-onl…[2]
又来了，本瓜又来了~ 对于 web 技术在线资源收集，绝不手软！
一个链接🔗，就是一个新世界🌏！开冲🏄！
1. Browser Default Styles[3]
可以在 Browser Default Styles[4] 中查询 HTML 元素在每个浏览器下的默认样式；
2. Clippy[5]
可以在 Clippy[6] 为你的图片作剪辑，并且生成对应的 css clip-path 属性；
3. CSS keyframes[7]
CSS keyframes[8] 可以帮助你创建 CSS 帧动画；
4. Neumorphism.io[9]
Neumorphism.io[10] 帮你创建新拟态的 UI 风格；
5. CSS Cursors[11]
CSS Cursors[12] 让你的光标足够酷；
6. CSS Grid Generator[13]
CSS Grid Generator[14]，作用如其名，帮助创建 CSS Gird；
7. Placeholder Image Generator[15]
Placeholder Image Generator[16] 帮助创建图片未加载出来的占位信息；
8. Htmldom[17]
Htmldom[18]：纯原生 JS 代码合集，帮助操作 DOM；
9. HTML5 head elements[19]
HTML5 head elements[20] 是 head 标签设置最强指南，真滴强；
10. Input Type Sandbox[21]
设置并校验 Input 框输入，Input Type Sandbox[22] 各种类型都有，专精尖；
11. Meta Tags[23]
Meta Tags[24] 帮你自动导出流行社交网络（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；
12. Can I Include[25]
Can I Include[26] 帮你确定 HTML 元素之间是否可以嵌套；
13. Key codes[27]
Key codes[28] 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听；
14. Color contrast checker[29]
Color contrast checker[30] 帮你检查网页设计中两种颜色之间的对比度；
15. Git Command Explorer[31]
Git Command Explorer[32] 帮你充分了解和学习 Git 命令；
16. Make thumbnails[33]
Make thumbnails[34] 帮你轻松创建图像缩略图；
17. Can I Email[35]
Can I Email[36] 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性；
18. Trianglify[37]
Trianglify[38] 帮你的网站创作出美丽的背景；
19. CSS Layout[39]
CSS Layout[40] 收集了流行的 CSS 布局，帮你轻松选择合适的网站设计；
20. FANCY-BORDER-RADIUS[41]
FANCY-BORDER-RADIUS[42] 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象；
21. 1loc[43]
1loc[44] 是一个聚合解决方案网站，帮你解决 JS 编程中经常遇到的各类问题；
22. Color Namer[45]
Color Namer[46] 让每一个颜色都有一个独特的名字；
23. BrowserFrame[47]
BrowserFrame[48] 给你的网站添加一个浏览器背景；
24. CSS Scan[49]
CSS Scan[50] 收集了超多 box-shadow 效果网站；
25. Favicon[51]
Favicon[52] 帮你创建免费的 FavIcon；
26. CSS Filter[53]
CSS Filter[54] 将 CSS Filter 玩出花来；
27. Simple CSS Media Query Generator[55]
Simple CSS Media Query Generator[56] 帮你轻松搞定媒体查询；
28. Mix Font[57]
Mix Font[58] 通过一种有趣且简单的方式来发现、创建新字体；
29. Omatsuri[59]
Omatsuri[60] 设计师工具集合网站，例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等；
30. Underline Generator[61]
Underline Generator[62] 帮你创建美丽的下划线；
31. Checkboxes \& Radios CSS Generator[63]
Checkboxes \& Radios CSS Generator[64] 创建 Checkboxes & Radios；
32. Convert Images to Base64[65]
Convert Images to Base64[66] 将图片转为 base64 格式；
33. Responsively[67]
Responsively[68] 帮你查看多种设备下的网站效果；
34. UI Design Daily[69]
UI Design Daily[70]：UI 设计聚合网；
35. Devdocs[71]
Devdocs[72]：开发文档聚合网；
36. Shortcode[73]
Shortcode[74] 帮你用简短的代码解决编程中的常见问题；
37. Public-apis[75]
Public-apis[76] 为你的网站提供免费的 API，接入免费数据；
38. CSS Grid Layout Generator[77]
CSS Grid Layout Generator[78] 帮你用CSS快速构建复杂的网格系统；
39. CSS Duotone Generator[79]
CSS Duotone Generator[80] 帮你设置图像的CSS属性，例如图像的距离、不透明度、模糊、颜色等；
40. CSS3 Generator[81]
CSS3 Generator[82] 帮你快速创建复杂的 CSS3 属性，例如长方体阴影、渐变、过渡效果等。此外，对于每个属性，还提供了不同浏览器支持的详细信息；
41. Box Model[83]
Box Model[84] 帮你更直观的查web 对象填充设置、边距和边框属性等；
42. Animated CSS Background Generator[85]
Animated CSS Background Generator[86] 帮你借用颜色创建动画背景。此外，还提供一些其它属性配置，如计数、大小、平均速度等；
43. Web Code Tools[87]
Web Code Tools[88] ，通过输入属性值来设置CSS中的公共属性，并能直接预览效果；
44. Enjoy CSS[89]
Enjoy CSS[90] 帮你设置样式，设置即预览，享受它吧~
45. CSS Portal[91]
CSS Portal[92]，是一个 CSS 各类生成器集合站点；
46. CSS3 Generator OverDesign[93]
CSS3 Generator OverDesign[94] 帮你设置web设计中的常用属性；
47. HTML Table Generator[95]
HTML Table Generator[96] 帮你轻松设计网站表格；
48. Making CSS[97]
Making CSS[98] 是一个工具聚合网站，帮你轻松实现 CSS；
49. CSS Masonry Generator[99]
CSS Masonry Generator[100] 帮你实现可配置的图片瀑布流；
50. Generator of CSS background patterns[101]
Generator of CSS background patterns[102] 帮你轻松构建不同类型的网站背景；
小结
OK，以上便是本篇分享；请把收藏力拉满，拿走不谢！！
撰文不易，点赞鼓励👍👍👍👍👍👍
关于本文
作者：掘金安东尼
https://juejin.cn/post/7030572979868139551
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！
回复「交流」，吹吹水、聊聊技术、吐吐槽！
回复「阅读」，每日刷刷高质量好文！
如果这篇文章对你有帮助，「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
