HTML/CSS 在线渲染器
HTML/CSS 在线渲染器 — 免费在线编辑 HTML 和 CSS 代码，实时预览渲染效果，一键导出为 PNG 高清图片或 PDF 文档。 支持自定义导出尺寸、缩放比例、背景透明等选项。适用于快速原型设计、代码展示、教程截图等场景。 完全免费，无需注册，所有处理均在浏览器本地完成。
导出图片
将预览内容导出为图片，可直接下载或复制到剪贴板分享。
提示：「复制图片」后可直接粘贴到微信、QQ、钉钉等聊天窗口或文档中分享。
使用说明
- 输入代码 — 在左侧 HTML 和 CSS 编辑器中输入代码，或使用「模板」下拉框加载预设样式快速开始
- 实时预览 — 右侧预览区会实时显示渲染效果，可点击「刷新预览」手动更新，或选择不同设备尺寸测试响应式效果
- 导出图片 — 点击「下载 PNG 图片」保存到本地，或点击「复制图片」直接复制到剪贴板用于分享
功能特点
双栏编辑器
HTML 和 CSS 分离编辑，代码结构清晰，支持语法高亮风格的编辑器界面，编写体验流畅。
实时预览
代码修改后实时渲染预览，支持多种设备尺寸切换，方便测试响应式布局效果。
一键导出图片
将渲染结果一键导出为 PNG 图片，与预览效果完全一致，所见即所得。
复制图片分享
一键复制图片到剪贴板，可直接粘贴到微信、QQ、钉钉等聊天窗口或文档中快速分享。
预设模板
提供卡片、按钮、表单、徽章、提示框等多种常用组件模板，加载即用，快速开始设计。
隐私安全
100% 客户端处理，代码和渲染过程均在浏览器本地完成，不会上传到任何服务器，数据安全有保障。
完全免费
无需注册、无需登录、没有使用次数限制，也无任何隐藏收费，随时随地免费使用。
常见问题
首次加载需要联网获取依赖库（html2canvas），之后所有操作（包括导出）均在浏览器本地完成，数据不会上传到服务器。您甚至可以在离线状态下继续使用已加载的页面。
复制图片后，可以直接粘贴到：微信、QQ、钉钉、飞书、企业微信等即时通讯工具；Word、WPS、Pages 等文档编辑器；Notion、语雀、飞书文档等在线协作平台；以及支持图片粘贴的任何其他应用。
支持现代浏览器支持的所有 CSS 特性，包括 Flexbox 弹性布局、Grid 网格布局、CSS 动画、渐变背景、阴影效果、圆角边框等。由于使用浏览器引擎渲染，兼容性取决于您使用的浏览器版本。
导出的图片使用白色背景，与预览区域的灰色背景略有不同。实际渲染内容与预览完全一致。如需查看透明效果，请在代码中设置 body 的背景色。
当前版本需要手动复制代码保存到本地文件。您可以：1) 分别复制 HTML 和 CSS 编辑器的内容保存为 .html 和 .css 文件；2) 导出 PNG 图片保存渲染结果。未来版本可能会添加代码保存功能。
完全免费。无需注册，无需登录，没有使用次数限制，也没有任何隐藏收费。如果您觉得工具好用，欢迎分享给更多需要的朋友。
更多在线工具
除了 HTML/CSS 渲染器，木目工具箱还提供其他实用的在线工具：