对于 web 技术在线资源收集，绝不手软！

一个链接，就是一个新世界！开冲?！

1.Browser Default Styles

https://browserdefaultstyles.com/

可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式；

2.Clippy

https://bennettfeely.com/clippy/

可以在 Clippy 为你的图片作剪辑，并且生成对应的 css clip-path 属性；

3.CSS keyframes

https://keyframes.app/animate/

CSS keyframes 可以帮助你创建 CSS 帧动画；

4.Neumorphism.io

https://neumorphism.io/#55b9f3

Neumorphism.io 帮你创建新拟态的 UI 风格；

5.CSS Cursors

https://csscursor.info/

CSS Cursors 让你的光标足够酷；

6.CSS Grid Generator

https://cssgrid-generator.netlify.app/

CSS Grid Generator，作用如其名，帮助创建 CSS Gird；

7.Placeholder Image Generator

https://placeholderimage.dev/

Placeholder Image Generator 帮助创建图片未加载出来的占位信息；

8.Htmldom

https://htmldom.dev/

HTMLdom：纯原生 JS 代码合集，帮助操作 DOM；

9.HTML5 head elements

https://htmlhead.dev/

HTML5 head elements 是 head 标签设置最强指南，真滴强；

10.Input Type Sandbox

https://inputtypes.com/

设置并校验 Input 框输入，Input Type Sandbox 各种类型都有，专精尖；

11.Meta Tags

https://metatags.io/

Meta Tags 帮你自动导出流行社交网络（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；

12.Can I Include

https://caninclude.glitch.me/

Can I Include 帮你确定 HTML 元素之间是否可以嵌套；

13.Key codes

https://keycode.info/

Key codes 帮你轻松找到键盘按键所对应的 keycodes 来设置事件监听；

14.Color contrast checker

https://polypane.app/color-contrast/

Color contrast checker 帮你检查网页设计中两种颜色之间的对比度；

15.Git Command Explorer

https://gitexplorer.com/

Git Command Explorer 帮你充分了解和学习 Git 命令；

16.Make thumbnails

http://makethumbnails.com/#dropzone

Make thumbnails 帮你轻松创建图像缩略图；

17.Can I Email

https://www.caniemail.com/

Can I Email 帮你查看电子邮件中可支持哪些 HTML 和 CSS 属性；

18.Trianglify

https://trianglify.io/

Trianglify 帮你的网站创作出美丽的背景；

19.CSS Layout

https://csslayout.io/

CSS Layout 收集了流行的 CSS 布局，帮你轻松选择合适的网站设计；

20.FANCY-BORDER-RADIUS

https://9elements.github.io/fancy-border-radius/

FANCY-BORDER-RADIUS 帮你通过使用 CSS BORDER-RADIUS 属性设置形状来设计对象；

21.1loc

https://1loc.dev/

1loc 是一个聚合解决方案网站，帮你解决 JS 编程中经常遇到的各类问题；

22.Color Namer

https://colornamer.netlify.app/

Color Namer 让每一个颜色都有一个独特的名字；

23.BrowserFrame

https://browserframe.com/

BrowserFrame 给你的网站添加一个浏览器背景；

24.CSS Scan

https://getcssscan.com/css-box-shadow-examples

CSS Scan 收集了超多 box-shadow 效果网站；

25.Favicon

https://favicon.io/

Favicon 帮你创建免费的 FavIcon；

26.CSS Filter

https://www.cssfilters.co/

CSS Filter 将 CSS Filter 玩出花来；

27.Simple CSS Media Query Generator

https://simplecss.eu/

Simple CSS Media Query Generator 帮你轻松搞定媒体查询；

28.Mix Font

https://www.mixfont.com/

Mix Font 通过一种有趣且简单的方式来发现、创建新字体；

29.Omatsuri

https://omatsuri.app/triangle-generator

Omatsuri 设计师工具集合网站，例如使用CSS创建三角形、创建网站光标显示样式、HTML符号等；

30.Underline Generator

https://underline-generator.netlify.app/

Underline Generator 帮你创建美丽的下划线；

31.Checkboxes & Radios CSS Generator

https://bun.js.org/

Checkboxes & Radios CSS Generator 创建 Checkboxes & Radios；

32.Convert Images to Base64

https://www.base64-image.de/

Convert Images to Base64 将图片转为 base64 格式；

33.Responsively

https://responsively.app/

Responsively 帮你查看多种设备下的网站效果；

34.UI Design Daily

https://www.uidesigndaily.com/

UI Design Daily：UI 设计聚合网；

35.Devdocs

https://devdocs.io/

Devdocs：开发文档聚合网；

36.Shortcode

https://shortcode.dev/javascript-cheatsheet#javascript-cheatsheet

Shortcode 帮你用简短的代码解决编程中的常见问题；

37.Public-apis

https://public-apis.io/

Public-apis 为你的网站提供免费的 API，接入免费数据；

38.CSS Grid Layout Generator

https://css-grid-layout-generator.pw/

CSS Grid Layout Generator 帮你用CSS快速构建复杂的网格系统；

39.CSS Duotone Generator

https://cssduotone.com/

CSS Duotone Generator 帮你设置图像的CSS属性，例如图像的距离、不透明度、模糊、颜色等；

40.CSS3 Generator

http://css3generator.com/

CSS3 Generator 帮你快速创建复杂的 CSS3 属性，例如长方体阴影、渐变、过渡效果等。此外，对于每个属性，还提供了不同浏览器支持的详细信息；

41.Box Model

https://codepen.io/carolineartz/full/ogVXZj

Box Model 帮你更直观的查web 对象填充设置、边距和边框属性等；

42.Animated CSS Background Generator

https://wweb.dev/resources/animated-css-background-generator/

Animated CSS Background Generator 帮你借用颜色创建动画背景。此外，还提供一些其它属性配置，如计数、大小、平均速度等；

43.Web Code Tools

https://webcode.tools/generators/css

Web Code Tools ，通过输入属性值来设置CSS中的公共属性，并能直接预览效果；

44.Enjoy CSS

https://enjoycss.com/

Enjoy CSS 帮你设置样式，设置即预览，享受它吧~

45.CSS Portal

https://www.cssportal.com/css-generators.php

CSS Portal，是一个 CSS 各类生成器集合站点；

46.CSS3 Generator OverDesign

http://ds-overdesign.com/

CSS3 Generator OverDesign 帮你设置web设计中的常用属性；

47.HTML Table Generator

https://www.quackit.com/html/html_table_generator.cfm

HTML Table Generator 帮你轻松设计网站表格；

48.Making CSS

https://makingcss.com/

Making CSS 是一个工具聚合网站，帮你轻松实现 CSS；

49.CSS Masonry Generator

CSS Masonry Generator Tool

CSS Masonry Generator 帮你实现可配置的图片瀑布流；

50.Generator of CSS background patterns

https://online-free-tools.com/en/css_pattern_generator_background

Generator of CSS background patterns 帮你轻松构建不同类型的网站背景；

小结

OK，以上便是本篇分享；请把收藏力拉满，拿走不谢！！

撰文不易，点赞鼓励

我是掘金安东尼： 一名人气前端技术博主（文章 100w+ 阅读量）

终身写作者（INFP 写作人格）

坚持与热爱（简书打卡 1000 日）

陪你一起度过漫长技术岁月吧（以梦为马）

觉得不错，点个赞吧（您的三连，我最大的动力 ）