Logo

Fast Text Format

返回控制台

Fast Text Format Tools

极速实用的终极工具集合，可进行格式化、转换和简化您的工作流。

收藏夹

最近使用

最近添加

文本及比较

大小写转换

立即转换字符串大小写、URL 编码和解码 Base64。

编码 / 解码器

对 URL、Base64 和 HTML 实体等各种格式进行编码和解码。

列表排序与去重工具

即时按字母、数字或文本长度对文本数组进行排序，并去除重复行。

正则替换器

执行正则表达式，查看实时匹配并使用速查表。

文本差异

并排比较两个文本块以高亮显示差异。

文本统计

统计单词、字符、句子、估计阅读时间并检查关键字密度。

翻译器

即时在数十种语言之间翻译文本。

代码及格式化

Base64 转文件

将 Base64 字符串或 Data URI 解码还原为可供下载的文件（图像、PDF、文档、音频），支持实时预览。

代码美化

美化、验证并压缩您的 JSON、JavaScript、CSS 和 HTML 代码为清晰易读的语法。

CSS 格式化

格式化、美化、验证并压缩 CSS 样式表，支持自定义缩进。

CSS 可视化生成器

可视化生成并导出阴影、渐变、Flexbox 及 Grid 网格布局的 CSS 代码。

CSV 转 JSON/SQL

将 CSV 数据转换为 JSON 数组或 SQL INSERT 语句。

cURL 转 Fetch

轻松将 cURL 命令转换为 JavaScript Fetch API 代码。

HTML / XML

即时美化、压缩并清理混乱的代码。

HTML 转 JSX

客户端工具，将 HTML 标签和属性转换为 React 兼容的 JSX 语法。

HTML 转 Tailwind CSS

将标准的行内样式和 CSS 规则转换为 Tailwind CSS 原子类，支持实时预览。

JS 代码混淆器

将可读的 JavaScript 代码转换为不可读且压缩的代码，保护核心业务逻辑。

JSON 转代码

将 JSON 对象转换为支持各种语言的类型化模型。

JSON 树状视图查看器

直观查看、展开、折叠、搜索和过滤复杂的 JSON 数据，并支持路径复制。

Markdown

使用实时 HTML 预览编写原始 markdown。

Source Map 查看器

客户端工具，用于上传 .map 文件并反混淆/还原堆栈轨迹。

SQL 格式化

美化和格式化混乱的 SQL 查询。

字符串转义与反转义

安全转义（与反转义）引号、反斜杠和换行符，适用于 JSON 字符串、SQL 查询、HTML 和 Java/C# 代码。

SVG 优化器

压缩并清理原始 SVG 代码。

SVG 转 PNG/WEBP

客户端工具，利用 HTML Canvas 将 SVG 代码或文件光栅化渲染为可下载的图像。

XML 实用工具

格式化和压缩 XML 字符串。

YAML <-> JSON

在 YAML 和 JSON 之间即时转换。

数据及加密

Bcrypt 哈希

本地生成和验证 Bcrypt 密码。

Epoch 时间

将时间戳转换为人类可读的日期。

哈希生成器

计算 MD5、SHA-1、SHA-256 和 SHA-512 加密哈希。

JWT 解码器

安全地将 JSON Web Tokens 解析为格式化的标头和有效载荷数据。

HMAC 生成器

使用 SHA-256、SHA-512、MD5 和密钥计算并验证密码学 HMAC 签名。

生成器及实用工具

ASCII 艺术

生成大型 ASCII 艺术文本横幅。

条形码生成器

客户端工具，使用 Canvas 从文本生成一维线性条形码（UPC、EAN、Code39）。

CHMOD 计算器

轻松计算 Linux 文件权限。

颜色对比度

检查 WCAG 色彩对比度可访问性。

颜色格式

即时转换 HEX、RGB 和 HSL 颜色代码。

Cron 解码器

将 cron 表达式翻译成人类可读的文本。

Favicon 图标生成器

将常用图像转换为广泛兼容的 .ico 文件并生成标准的 Web 应用图标尺寸。

图像 Base64

将图像文件安全转换为 Base64 Data URI 字符串和 CSS background-image 样式属性。

图片压缩工具

在浏览器本地压缩并优化 JPEG、PNG、WEBP 和 AVIF 图像。

Markdown 表生成器

可视化网格编辑器，允许用户轻松添加行/列并立即输出格式完美的 Markdown 表格语法。

Meta 标签与 Open Graph 生成器

生成并直观预览 SEO Meta 标签、Twitter 卡片和 Facebook Open Graph 标签。

模拟数据生成器

生成数百行虚假测试数据（姓名、电子邮件、地址、日期、信用卡）并将其导出为 CSV、JSON 或 SQL INSERT 语句以进行数据库测试。

密码生成器

使用加密算法创建强大的安全密码。

PDF 工具箱

100% 在浏览器本地合并、拆分、提取、旋转和重新排序 PDF 页面。

占位文本

为 UI 界面模型创建随机的占位文本。

QR 二维码

从文本或 URL 创建可伸缩和可扫描的二维码。

正则表达式测试器和构建器

使用实时匹配和捕获组突出显示、语法解释细分以及多字符串测试模式来测试正则表达式。

Robots.txt 生成器

构建有效的 robots.txt 规则和爬虫指令，并阻止 AI 抓取工具。

UUID / GUID

即时生成通用唯一标识符 (v4)。

XML Sitemap 生成器

构建包含自定义 URL、更新频率和优先级的有效 XML Sitemap，供搜索引擎索引。

财务及单位

货币转换器

实时计算全球汇率。

单位转换器

即时转换长度、重量、温度和数据存储。

网络

DNS 查询

实时检查 DNS 记录。

HTTP 标头查看器

查看您的浏览器发送的 HTTP 请求标头。

网速测试

测试您的下载和上传连接速度。

IP 查询

查询 IP 地址和地理位置数据。

MAC 厂商查询

从 MAC 地址识别硬件厂商。

RDAP 查询

通过 RDAP 查询域名和 IP 注册信息、注册商、域名服务器及 DNSSEC 状态。

重定向与链接追踪

揭开短链接的真实地址，追踪完整的 HTTP 301/302 重定向链至最终目的地。

SSL 证书检查器

实时检查任何域名的 SSL/TLS 证书、颁发机构链、到期倒计时、SAN 备用名称及指纹。

子网计算器

计算 CIDR 网络掩码和 IP 范围。

URL 解析

轻松提取并构建 URL 查询字符串。

User-Agent 解析

从 User-Agent 字符串中提取操作系统和浏览器信息。

Webhook 测试器

使用自定义请求头、HMAC 签名与实时响应检查发送、测试和调试 Webhook 投递。

代码及格式化

CSS 可视化生成器

可视化生成并导出阴影、渐变、Flexbox 及 Grid 网格布局的 CSS 代码。

阴影参数设置
0px
10px
25px
-5px
25%
16px
实时预览
Box Shadow
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);
渐变参数设置
135°
实时预览 
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Flex 容器属性
16px
4

Click any item in the preview to select and inspect its properties.

选中的子项: #1
实时预览 
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
Grid 网格参数
3
2
16px
16px
实时预览 
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}

使用说明

选择生成器模式（盒阴影、渐变、Flexbox 或 Grid 网格布局）。通过滑块和控件实时调整视觉效果，一键复制导出的 CSS 代码。

常见问题解答

CSS Box Shadow 如何工作以及每个参数的含义是什么？

CSS box-shadow 属性将一个或多个阴影附加到元素框架上。这些参数指定水平偏移 (X)、垂直偏移 (Y)、模糊半径（阴影边缘的柔和程度或扩散程度）、扩散半径（阴影扩展或收缩的程度）、阴影颜色（通常为半透明 rgba）以及用于在容器内渲染阴影的可选“inset”关键字。

为什么要使用多个盒子阴影层来实现真实的 UI 阴影？

真实世界的阴影由周围环境光和直接定向光组成。将紧密、稍暗的阴影与宽大、柔和、低不透明度的阴影分层，可以创造自然的高度和深度，而不会显得浑浊或人造。

CSS 中的线性渐变和径向渐变有什么区别？

线性渐变沿着由度数或关键字定义的直线方向轴（例如，135deg 或“到右下角”）过渡颜色。径向渐变从单个原点以圆形或椭圆形图案向外出现，从而创建聚光灯或球形颜色过渡。

什么时候应该使用 CSS Flexbox 和 CSS Grid？

Flexbox 是一种一维布局系统，非常适合在单行或单列中组织项目（例如导航栏、按钮组和工具栏对齐方式）。 CSS Grid 是一个二维布局系统，专为复杂的网页结构、多列仪表板布局和严格的网格对齐而设计。

Flexbox 中的 justify-content 和align-items 有什么区别？

justify-content 控制 Flex 项目沿主轴的分布（当 Flex-Direction 为行时为水平分布；当为列时为垂直分布）。 align-items 控制项目沿横轴（垂直于主轴）的定位。

Repeat(auto-fit, minmax(...)) 如何在没有媒体查询的情况下创建响应式网格？

auto-fit 关键字指示网格容器根据容器的当前宽度容纳尽可能多的列。 minmax(200px, 1fr) 函数确保每列永远不会缩小到 200px 以下，而是按比例扩展以占用剩余的可用空间。

现代 CSS 布局中的间隙属性是什么？

gap 属性定义了 Flexbox 和 Grid 布局中行和列之间的一致间距。它取代了过时的边距黑客和负边距，并且不会在容器的外周上添加间距。

生成的 CSS 样式是否兼容所有现代 Web 浏览器？

是的。现代 CSS 盒阴影、线性/径向渐变、Flexbox 和 CSS 网格在 Chrome、Firefox、Safari、Edge、iOS Safari 和 Android 浏览器中具有普遍支持，无需使用 -webkit- 或 -moz- 等传统供应商前缀。

flex-grow 和 flex-shrink 如何确定项目大小？

flex-grow 指定一个项目相对于其同级项目应吸收多少容器剩余的正空间。 flex-shrink 确定当容器空间不足时项目压缩的速率。

我可以在 React、Vue、Svelte 或 Tailwind 项目中使用导出的 CSS 吗？

是的。导出的 CSS 规则可以直接粘贴到标准 CSS 文件、CSS 模块、样式组件中，或转换为任意 Tailwind 实用程序类（例如，shadow-[...]、bg-[线性渐变（...）]）。

找不到结果

请尝试调整您的搜索词。