CSS文字阴影生成器 - 在线创建文字效果
使用可视化控件和实时预览设计CSS文字阴影。创建霓虹发光、3D、浮雕、火焰和轮廓等文字效果，支持多层阴影。
常见问题
什么是CSS text-shadow？
CSS text-shadow是一个为文本字符添加阴影效果的属性。与应用于元素边界框的box-shadow不同，text-shadow会沿着每个文本字形的轮廓。它接受水平偏移、垂直偏移、可选的模糊半径和颜色。多个用逗号分隔的阴影可以组合使用，创建霓虹发光、3D深度、轮廓和火焰等创意效果。
如何使用这个文字阴影生成器？
调整滑块设置水平偏移、垂直偏移、模糊半径和不透明度。使用取色器选择阴影颜色。在预览文本上实时查看效果。添加多个图层创建霓虹发光或3D文字等复杂效果。自定义预览文本、字号、字重和背景颜色。将生成的CSS代码复制到您的样式表中。
text-shadow和box-shadow有什么区别？
text-shadow仅对文本内容应用阴影，沿着每个字符的形状。box-shadow对元素的矩形边界框应用阴影。此外，text-shadow不支持box-shadow提供的spread-radius或inset关键字。排版效果使用text-shadow，容器/卡片高度效果使用box-shadow。
如何创建霓虹发光文字效果？
霓虹发光使用多个零偏移阴影图层，模糊半径递增，配合明亮的颜色。例如，使用#00ff00等霓虹颜色叠加3-4个阴影：0 0 7px、0 0 10px、0 0 21px和0 0 42px。本工具的霓虹发光预设一键即可自动应用此技术。
可以使用多个文字阴影吗？
可以。CSS text-shadow属性支持逗号分隔的多个阴影。本工具允许添加最多10个阴影图层，每个图层都有独立的控件。阴影按从前到后的顺序应用。这使得3D文字、轮廓文字、火焰效果等成为可能。
如何创建3D/复古文字效果？
3D或复古文字效果使用多个偏移递增且无模糊的阴影图层。每个图层比前一个多偏移1px，使用逐渐变暗的颜色。本工具的复古3D预设使用5个叠加图层自动创建此效果。
我的设计数据安全吗？
是的。本工具完全在浏览器中运行。不会向任何服务器发送数据。您的阴影配置、预览文本和所有自定义设置都保留在您的设备上，确保完全的隐私。
代码示例
// Generate text-shadow CSS from parameters
function generateTextShadow(layers) {
return layers.map(layer => {
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Generate neon glow effect
function generateNeonGlow(color, layerCount = 4, maxBlur = 42) {
const shadows = [];
for (let i = 0; i < layerCount; i++) {
const progress = (i + 1) / layerCount;
const blur = Math.round(maxBlur * progress);
const opacity = (1 - progress * 0.6).toFixed(1);
const { r, g, b } = hexToRgb(color);
shadows.push(`0 0 ${blur}px rgba(${r}, ${g}, ${b}, ${opacity})`);
}
return shadows.join(', ');
}
// Usage
const shadow = generateTextShadow([
{ offsetX: 2, offsetY: 2, blur: 4, color: '#000000', opacity: 0.5 }
]);
console.log(`text-shadow: ${shadow};`);
// Output: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);