CSS工具/文本阴影生成器
文本阴影生成器
使用多层和实时预览创建精美的文本阴影
预览
Sample Text
48px
#1E293B
#F8FAFC
阴影图层
层 1
#00000040
2px
2px
4px
预设
CSS代码
Loading...CSS Text Shadow Guide
Learn how to add depth and effects to your text
What is Text Shadow?
The CSS text-shadow property adds shadow effects to text. Like box-shadow, you can apply multiple shadows by separating them with commas. Text shadows are defined by X and Y offsets, blur radius, and color. They're perfect for creating depth, glow effects, and stylized typography.
How to Use This Tool
- Add shadow layers using the Add Layer button
- Adjust X/Y offset to position shadows behind text
- Use blur to soften shadows or create glow effects
- Stack multiple layers for complex effects, then copy CSS
Pro Tips
- Use bright colors with large blur for neon glow effects
- Stack multiple shadows with incrementing offsets for 3D depth
- Subtle shadows (1-2px offset, low opacity) improve readability
Browser Support
Text-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been widely supported since IE10, making it safe for production use.
常见问题
text-shadow和box-shadow有什么区别？
text-shadow仅对文字内容应用阴影，沿着每个字符的形状。box-shadow对元素的整个盒子应用阴影。此外，text-shadow没有spread值和inset选项。对于文字效果应使用text-shadow。
如何创建霓虹发光效果？
使用多个相同颜色、不同模糊半径的阴影层。例如：text-shadow: 0 0 10px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de;。较小的模糊值创建核心发光，较大的值创建外围光晕。在深色背景上效果最佳。
如何创建3D文字效果？
叠加多个略微偏移的阴影层。例如：text-shadow: 1px 1px 0 #333, 2px 2px 0 #333, 3px 3px 0 #333;。每一层略微移动创造深度感。使用渐变的颜色可以增强立体效果。
模糊半径的单位是什么？
模糊半径使用像素(px)单位，必须是正数。0px表示没有模糊，产生锐利的阴影。值越大阴影越模糊扩散。通常2-4px产生自然的柔和阴影，20px以上产生发光效果。
如何提高在图片上文字的可读性？
使用低不透明度的柔和阴影可以提高可读性。例如：text-shadow: 0 1px 3px rgba(0,0,0,0.5);。也可以使用多层阴影：细微的深色阴影增加对比度，而不会使效果过于明显。在浅色背景上用深色阴影，在深色背景上用浅色阴影。