# 前端与网页开发工具

> CSS 渐变阴影、clip-path、Flex/Grid、Tailwind 色阶、Meta 标签、Favicon、雪碧图、SVG 优化、XPath 等前端工具。

- 网址: https://qilingtools.com/zh/tags/frontend
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

## 工具列表 (29)

- [正则测试](https://qilingtools.com/zh/regex): 免费在线正则表达式测试工具：实时匹配并高亮结果，显示分组，支持 g/i/m/s/u 标志，本地运行不上传，方便调试正则。
- [占位文本生成](https://qilingtools.com/zh/lorem): 免费在线占位文本生成器：生成拉丁 Lorem Ipsum 或中文乱数假文，可按段落、句子、词数生成，一键复制，用于排版和设计稿。
- [颜色转换](https://qilingtools.com/zh/color): 免费在线颜色转换工具：HEX、RGB、HSL 三种格式互转，内置取色器和颜色预览，一键复制，本地实时计算。
- [HTML 实体编解码](https://qilingtools.com/zh/html-entity): 免费在线 HTML 实体编码解码工具：把 < > & " 等特殊字符转义为实体，或反向还原，可选转换非 ASCII 字符，本地运行。
- [图片 Base64](https://qilingtools.com/zh/image/base64): 免费在线图片 Base64 转换工具：把图片转成 Base64 / Data URI，可直接生成 CSS 与 HTML 代码；也能把 Base64 还原为图片预览并下载，本地处理不上传。
- [Favicon 生成](https://qilingtools.com/zh/image/favicon): 免费在线 favicon 生成器：把 PNG/JPG/SVG 图片转成多尺寸 favicon.ico，同时生成 Apple Touch、Android 图标、site.webmanifest 和 HTML 代码，本地处理不上传。
- [User-Agent 解析](https://qilingtools.com/zh/user-agent): 免费在线 UA 解析：从 User-Agent 字符串识别浏览器及版本、渲染引擎、操作系统、设备类型与型号，并检测 Googlebot、百度蜘蛛、GPTBot 等爬虫，默认显示你当前的 UA。
- [CSS 格式化](https://qilingtools.com/zh/css-format): 免费在线 CSS 格式化与压缩：一键美化，每条声明一行、选择器逐行排列，正确处理 @media、@supports、嵌套、注释与 url()，可排序属性、删注释，压缩模式显示省下的体积。
- [CSS 精灵图生成](https://qilingtools.com/zh/image/sprite): 免费在线 CSS Sprite 雪碧图生成器：多张图标合成精灵图，可选紧凑装箱 / 网格 / 横竖排，自动生成 CSS 类与 JSON 坐标，也能把精灵图切回单帧。
- [CSS 渐变生成器](https://qilingtools.com/zh/css-gradient): 免费在线 CSS 渐变生成器：可视化制作 linear、radial、conic 渐变，拖动色标、旋转角度、调透明度，内置预设，一键复制 CSS 与 Tailwind 类名，可导出 PNG。
- [CSS 阴影生成器](https://qilingtools.com/zh/css-shadow): 免费在线 CSS 阴影生成器：可视化调节 box-shadow 与 text-shadow，支持多层阴影、偏移、模糊、扩展、透明度和内阴影，内置 Material、新拟态等预设，输出 Tailwind 类名。
- [HTML 格式化](https://qilingtools.com/zh/html-format): 免费在线 HTML 格式化：一键美化或压缩代码，保留 <pre>、<textarea> 内容，自动格式化内嵌 CSS 与 JSON-LD，支持缩进、属性换行、行宽设置和沙箱实时预览。
- [键盘按键码查询](https://qilingtools.com/zh/keycode): 免费在线 JavaScript 键盘事件查看器：按下任意键即时显示 event.key、code、keyCode、location、修饰键和重复状态，屏幕键盘高亮，附按键对照表与可复制代码。
- [JS 格式化 / 压缩](https://qilingtools.com/zh/js-format): 免费在线 JavaScript 格式化：一键美化或压缩 JS、TypeScript、JSX 与 JSON，可选 2/4 空格或 Tab 缩进与行宽，正确处理正则、模板字符串和不写分号的代码。
- [Meta 标签生成器](https://qilingtools.com/zh/meta-tags): 免费在线 SEO Meta 标签生成与检查：生成 title、description、canonical、robots、Open Graph、Twitter 卡片与 JSON-LD，实时预览搜索与社交卡片。
- [SVG 压缩优化](https://qilingtools.com/zh/svg-optimize): 免费在线 SVG 压缩：删除编辑器数据、注释、元数据、默认属性和未用 defs，合并分组，按精度压缩路径，原图与优化后并排预览，可导出 Data URI 与 React JSX。
- [贝塞尔曲线编辑器](https://qilingtools.com/zh/math/bezier): 免费在线贝塞尔曲线工具：钢笔点锚点、拖控制柄，把多段 3/4/5 阶贝塞尔拼成任意图形，可随机生成并播放变形动画，导出 SVG 路径与 PNG。
- [颜色对比度检查](https://qilingtools.com/zh/color-contrast): 免费在线颜色对比度检查：计算 WCAG 2.x 对比度与 APCA Lc 值，判断 AA/AAA 正文、大号文字与界面组件是否达标，自动推荐最近的达标颜色，支持色盲模拟与调色板矩阵。
- [占位图生成](https://qilingtools.com/zh/image/placeholder): 免费在线占位图生成：自定义宽高、背景色、文字颜色与文案，字号自动适应，导出 PNG、JPG、WebP、SVG，批量尺寸打包 ZIP，并可复制 Data URI 或 SVG 代码。
- [代码截图美化](https://qilingtools.com/zh/code-screenshot): 免费在线代码转图片：语法高亮自动识别语言，10 套深浅色主题，Mac 窗口样式、行号、渐变背景与投影，导出高清 PNG（最高 4 倍）或 SVG，可一键复制图片。
- [CSS clip-path 生成器](https://qilingtools.com/zh/css-clip-path): 免费在线 CSS clip-path 生成器：拖动顶点编辑多边形，支持圆形、椭圆、带圆角的 inset，25 个预设（三角形、箭头、五角星、对话气泡等），在图片上实时预览并复制 CSS。
- [Flexbox 与 Grid 布局演练场](https://qilingtools.com/zh/flex-grid): 在线 Flexbox 与 CSS Grid 演练场：实时调整容器与子项属性，拖动框选命名 grid-template-areas，生成 CSS、HTML 和 Tailwind 类名，内置圣杯布局等预设。
- [robots.txt 与 sitemap 生成器](https://qilingtools.com/zh/robots-sitemap): 免费在线生成 robots.txt（一键屏蔽 GPTBot、ClaudeBot 等 AI 爬虫）并按 Google 规则测试 URL；从网址列表生成 sitemap.xml，支持 hreflang、图片视频、自动拆分与校验。
- [Tailwind 色阶生成器](https://qilingtools.com/zh/tailwind-palette): 输入品牌色，按 Tailwind 默认色板的 OKLCH 亮度曲线生成 50～950 共 11 级色阶，标注白底/黑底对比度，导出 Tailwind v3 配置、v4 @theme、CSS 变量、SCSS 与 JSON。
- [XPath / CSS 选择器测试](https://qilingtools.com/zh/xpath-tester): 免费在线测试 XPath 1.0 与 CSS 选择器：粘贴 XML/HTML 即时高亮匹配节点，支持命名空间前缀、count() 等函数结果，点击节点自动生成最短唯一 XPath 与 CSS 选择器。
- [精灵图动画工具](https://qilingtools.com/zh/image/sprite-animate): 免费在线精灵图动画：按行列或格子尺寸切帧、自动识别网格，设置帧序、帧率与洋葱皮，导出 GIF、APNG、动态 WebP 或帧 ZIP。
- [CSS 动画生成器](https://qilingtools.com/zh/css-animation): 可视化制作 CSS @keyframes 动画：18 个预设、时间轴编辑关键帧、贝塞尔曲线与 steps() 缓动、时长循环方向等参数，实时预览，一键复制 CSS 或 Tailwind 配置。
- [配色方案生成器](https://qilingtools.com/zh/palette-generator): 在线生成配色方案：按空格随机配色并锁定喜欢的颜色，支持类似色、互补、三角等和谐规则和图片取色，带对比度检查、色盲预览，可导出 CSS、Tailwind、ASE、GPL、PNG。
- [SVG 波浪与装饰图形生成器](https://qilingtools.com/zh/svg-shapes): 在线生成 SVG 装饰图形：多层波浪、随机 Blob、圆点/线条/六边形/等高线图案、层叠山峰，支持渐变与随机种子，导出 SVG、PNG、CSS 背景或 React 组件。