格式化与前端样式工具大全

聚合 SQL/CSS/HTML/JS/XML/YAML 格式化、颜色、渐变、阴影、Flex/Grid、CSS 特效和 Markdown 预览工具。

常见使用场景

格式化 SQL、CSS、HTML、JS、XML、YAML
生成颜色、渐变、阴影、圆角和滤镜
构建 Flex/Grid 布局和响应式尺寸
预览 Markdown、SVG 和前端参考数据

推荐工具组合

复制压缩代码后先格式化，再做审查或修改。
设计样式时先用颜色/渐变/阴影工具生成方案，再复制 CSS。
布局调试时先用 Flex/Grid 生成器验证参数，再回到项目里实现。

格式化工具会改变代码逻辑吗？

格式化主要调整空白、换行和缩进；复杂压缩代码仍建议人工复查。

生成的 CSS 可以直接使用吗？

可以作为起点，实际项目里还需要结合设计规范、浏览器兼容和响应式需求调整。

颜色转换
在 HEX、RGB 和 HSL 之间转换颜色。
CSS 渐变生成
可视化生成线性和径向渐变 CSS。
圆角生成
为卡片、按钮 and 容器生成 border-radius CSS。
毛玻璃生成
在线生成具有毛玻璃效果的 CSS 代码。
新拟物化生成
在线生成拟物化（软UI）效果的 CSS 代码。
三角形生成
可视化生成各种方向的 CSS 三角形。
剪裁路径生成
可视化生成各种多边形、星形、箭头等 CSS 剪裁形状。
Flex 布局生成
可视化生成 flex 布局 CSS，适合卡片组、按钮组和响应式容器。
Grid 布局生成
可视化生成 CSS Grid 布局，适合仪表盘、卡片墙和内容列表。
Transform 生成
组合 translate、rotate、scale 和 skew，快速输出 transform CSS。
Clamp 字体生成
为响应式标题和正文生成 clamp() 字体表达式。
动画时间函数生成
生成 easing、duration 和 delay，适合 transition 和轻量动效调试。
宽高比生成
生成 `aspect-ratio` 和兼容 padding 写法，适合视频、卡片和图片容器。
PX / REM / EM 换算
根据根字号和父级字号换算 px、rem、em，并生成 clamp 示例。
阴影预设画廊
浏览和复制常见界面阴影预设，快速搭建层级感。
CSS Filter 生成
调节 blur、contrast、brightness 等参数，快速生成 filter CSS。
Box Shadow 生成
可视化生成卡片和按钮常用的 box-shadow CSS。
Text Shadow 生成
为标题、海报和强调文本生成 text-shadow CSS。
CSS 美化压缩
对 CSS 做本地美化和压缩。
JavaScript 美化压缩
对 JavaScript 做本地美化和压缩。
HTML 美化压缩
对 HTML 做本地美化和压缩。
SVG 压缩
移除 SVG 注释和多余空白，生成更紧凑的 SVG 代码。
SVG 代码预览
粘贴 SVG 代码即时预览，并复制清理后的 SVG 或 Data URL。
SQL 美化压缩
对常见 SQL 做本地美化和压缩。
SQL 引号处理
为字段列表添加或去除 SQL 双引号，适合拼接查询片段。
Markdown 预览
双栏编辑 Markdown，实时预览标题、列表、引用和代码块。
CSS 特效生成
生成毛玻璃、新拟态、霓虹灯、故障文字和 3D 卡片翻转等 CSS 特效。
WEB 安全色
216 种 WEB 安全色参考，色值在 256 色显示器上不变色。
色彩扩展 / 传统色
CMYK/HSV 转换、中国传统色、CSS 单位换算。
动画 / 贝塞尔 / 液态
CSS 动画预设、贝塞尔曲线编辑器、液态变形效果。
在线调色板
从主色生成互补、分裂互补、三元、四元、类似色等配色方案。
文字特效
生成渐变色、描边、3D、霓虹、阴影、彩虹等 CSS 文字特效。