CSS渐变代码转图片
在线将 CSS 渐变代码一键渲染为 PNG 图片，支持线性渐变与径向渐变，可自定义图片宽高尺寸
输入渐变代码与图片尺寸
px
px
预览区域会按照当前 CSS 渐变代码与宽高即时渲染，下载 PNG 即为此处所见效果。
CSS 渐变转图片工具使用说明
使用提示
- 支持 linear-gradient 与 radial-gradient 语法，例如：linear-gradient(45deg, #f06, #09f)。
- 可以使用 to right / to bottom 等方向关键字，工具会自动转换为 Canvas 角度。
- 为避免生成超大图片，宽高会被限制在 1~4000 像素范围内。
- 生成的 PNG 图片在浏览器本地渲染完成，不会上传到服务器。
功能特点
- 支持常见 CSS 渐变语法：包括 linear-gradient 与 radial-gradient，两端颜色、多个中间色和百分比位置都会被解析并还原。
- 支持角度与方向关键字：既可以使用 45deg / 135deg 等角度，也可以使用 to right / to bottom 等方向关键字。
- 可自定义输出尺寸：根据实际需求设置图片宽高，适配社交媒体封面、背景图或占位图等不同场景。
- 本地渲染，无需上传：所有渐变解析与图片生成都在浏览器本地完成，不会上传到服务器，安全可靠。
- 一键导出 PNG：预览确认无误后，点击“下载 PNG”即可保存当前渐变效果的高清图片。
使用步骤
- 在“CSS 渐变代码”输入框中粘贴或编写你的渐变代码，例如 linear-gradient(135deg, #667eea 0%, #764ba2 100%)。
- 根据需要设置图片宽度和高度（单位为像素），一般建议使用 1200x630 之类的常见分享尺寸。
- 点击“预览渐变”按钮，右侧预览区域会即时渲染当前渐变效果。
- 确认效果无误后，点击“下载 PNG”按钮，即可将当前预览结果导出为本地 PNG 图片文件。
常用渐变示例
linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)
radial-gradient(circle at center, #F97316 0%, #DB2777 50%, #312E81 100%)