🅰️
文字描边生成器
可视化调节 -webkit-text-stroke 描边宽度与颜色，实时预览并复制 CSS。
本地处理 · 不上传
加载工具中…
相关：描边 · text-stroke · 空心字 · 轮廓 · css
文字描边生成器生成给文字加轮廓的 CSS，支持原生的 text-stroke 与多层阴影模拟两种方案，实时预览并输出代码。
使用步骤
- 设置描边宽度与颜色
- 选择实现方案
- 预览效果
- 复制生成的 CSS
使用场景
- 制作空心字标题
- 让文字在复杂背景上清晰可辨
- 做海报与封面的醒目标题
- 为浅色文字添加深色轮廓
小贴士
- `-webkit-text-stroke` 的描边是内外各占一半的，粗描边会侵蚀笔画，中文字体尤其明显——笔画密的字会糊成一团。
- 多层 text-shadow 模拟的描边只向外扩展不侵蚀笔画，中文标题用它效果更好。
- 描边配色应与文字色有足够对比，同色系的深浅描边几乎看不出效果。
常见问题
两种方案怎么选？
英文和笔画简单的字用 text-stroke，边缘干净；中文尤其是笔画密的字用多层阴影模拟，因为它不会向内侵蚀笔画。
描边把字糊住了？
这是 text-stroke 的固有行为——描边宽度的一半画在字形内部。减小宽度，或改用多层 text-shadow 方案。
能只要空心字吗？
可以，把文字颜色设为 transparent 只保留描边即可。注意此时对比度全靠描边，颜色要选得足够深。
文字描边生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用文字描边生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。