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