公众号排版工具 · 渐变设计

欢迎使用 微信公众号排版工具！现在每一套预设都采用了 主色 + 辅助色 + 互补色 的三色体系，渐变元素更丰富，每种文字设计都各具特色。

一、功能介绍

在这里粘贴你的 Markdown 内容，右侧实时预览公众号效果。一键复制，直接粘贴到公众号编辑器即可使用。

1.1 主要功能

• Markdown 实时转换 - 粘贴即可预览
• 自定义 CSS - 侧边栏调整样式
• GIF 动图插入 - 支持上传和 URL 插入
• 一键复制 - 直接粘贴到公众号编辑器

1.2 预设样式

目前有 5 套精心设计的预设风格，每一套都严格遵循三色体系：

二、代码示例

// 渐变颜色生成函数
function generateGradient(primary, secondary, angle = 135) {
  return `linear-gradient(${angle}deg, ${primary}, ${secondary})`;
}

const result = generateGradient('#1677ff', '#00b96b');
console.log(result);

💡 提示：选中预设样式可以快速切换风格。所有样式都支持内联复制，粘贴到公众号编辑器后效果一致。

2.1 高亮文字效果

在正文中，你可以使用 strong 标签 来强调重要内容。每套预设的强调色都不同，但都遵循互补色高亮的原则，让重点一眼就能看到。

比如这段文字里有一个非常重要的信息，你注意到了吗？还有行内代码 inlineCode 也有独特的渐变背景。

三、引用与分割线

优秀的排版不是堆砌装饰，而是让内容自己说话。渐变元素用在刀刃上，标题、重点、分割线各有分工，整体风格统一而不单调。

— 设计箴言

3.1 有序列表示例

1. 第一步：确定你的内容主题
2. 第二步：选择合适的预设风格
3. 第三步：粘贴 Markdown，调整细节
4. 第四步：一键复制，粘贴到公众号

3.2 无序列表示例

• 渐变标题：每套都有独特的渐变效果
• 渐变引用：双色背景让引用更醒目
• 渐变分割线：两端透明，中间实
• 渐变代码块：深色渐变 + 高亮语法

四、关于渐变设计

渐变元素的使用原则：

1. 大面积用淡渐变 — 背景、卡片等大面积区域用低饱和度渐变，不抢内容风头
2. 小面积用浓渐变 — 标题、按钮、标签用高饱和度渐变，起到强调作用
3. 三色统一 — 所有渐变只从主色、辅助色、互补色三种颜色取，整体风格一致
4. 适度使用 — 渐变是装饰，不是主角，内容永远是第一位的

祝排版愉快！🎉