去年帮朋友弄淘宝店，淘宝光店招就折腾了一下午。店招她想要个渐变背景加圆角边框，成器再配上一行居中的淘宝店铺名。我说这有什么难的店招，打开Dreamweaver就写。成器结果写完发现淘宝的淘宝店招模块只认特定宽高，950×120像素，店招多一像素都会错位。成器更坑的淘宝是，上传的店招图片如果超过120KB，系统直接给你压缩成马赛克。成器那天下午我们试了七种配色方案，淘宝最后她选了最丑的店招那个——因为只有那个方案的代码在淘宝后台没报错。

后来我干脆写了个小工具，成器纯前端，打开网页就能调参数。左边是预览区，右边是滑块和取色器。背景色、字体大小、边框圆角、阴影模糊度，拖一下就能看到实时效果。生成按钮一点，CSS代码直接复制到剪贴板。这东西没什么技术含量，但省去了反复上传图片、刷新后台、被淘宝压缩画质折磨的循环。

核心逻辑其实就几行。淘宝店招的容器宽度固定950px，高度你可以自定义，但超过120px会被折叠。所以生成器默认锁死120px，只让你调内部元素的样式。背景用linear-gradient，文字用text-shadow模拟立体感，边框用border-radius配box-shadow。所有属性都写成内联样式，因为淘宝的编辑器会过滤掉style标签里的部分规则。

 <div style="width:950px;height:120px;background:linear-gradient(135deg,#ff6b6b,#feca57);border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;"> <span style="font-size:36px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,0.3);font-family:'Microsoft YaHei',sans-serif;letter-spacing:4px;">你的店铺名</span> </div> 

看到没，就这么简单。但手写容易漏掉兼容性前缀。比如旧版Chrome不认无前缀的linear-gradient，得补上-webkit-。还有font-family，淘宝默认字体是宋体，你不指定的话，在Mac上显示正常，到Windows上就变成衬线体，丑得想哭。生成器里把这些坑都填了，你只管拖滑块。

有个细节值得说：淘宝店招的父容器有padding，默认左右各10px。所以你写width:950px会溢出，实际可用宽度是930px。我一开始没注意，预览区看着好好的，上传后右边总被裁掉一截。后来在生成器里加了个自动补偿，你调950，它实际输出930，但预览区按950显示。这样你看到的和最终效果一致。

颜色搭配是最耗时的部分。我预设了十二组渐变方案，从莫兰迪色系到高饱和撞色都有。但用户总想要自定义。取色器用的是原生input type="color"，简单粗暴。问题是两个颜色之间的过渡角度，0deg是下到上，90deg是左到右，135deg是左上到右下。很多人搞不清，我就把角度滑块做成可视化方向盘，拖到哪个方向，预览区的小箭头就指哪。

生成器上线三个月，后台统计显示平均每人调整参数27次才点生成。最受欢迎的功能是“随机配色”，点击率比手动调色高四倍。看来大家和我一样，选择困难症晚期。有个卖手工皂的店主留言说，她用生成器做了个抹茶绿渐变店招，当月转化率涨了0.3%。我不知道这数据可不可信，但至少她没再来问我代码怎么写。

代码托管在GitHub Pages上，纯静态，没后端。所有计算都在浏览器里完成。你断网也能用，只要页面加载过一次。有人建议我加个保存配置的功能，用localStorage存最近五组参数。我加了，但发现没人用。大家宁愿每次重新拖一遍，也不愿点一下“载入历史”。可能拖滑块本身就有解压效果吧。

最后说个坑：淘宝偶尔会更新编辑器，把某些CSS属性拉黑。上个月border-image突然失效，导致一批用边框图片的店招集体崩坏。我的生成器没用这个属性，躲过一劫。但谁知道下个月会禁什么。所以生成器里所有样式都做了降级方案，渐变不支持就退回纯色，圆角不支持就退回直角。丑是丑点，至少能用。