素材阁

文字阴影生成器

调节偏移/模糊/颜色,实时预览并复制 text-shadow,支持多层阴影,实时预览并复制 CSS。

预览
素采阁 Text Shadow
生成的 CSS

使用说明

调节文字阴影的偏移、模糊与颜色,支持多层叠加,实时预览并复制 text-shadow 代码。纯前端本地处理。

  1. 设置水平 / 垂直偏移与模糊半径。
  2. 选择阴影颜色与透明度。
  3. 需要时添加第二层阴影营造立体感。
  4. 复制生成的 text-shadow 代码。

常见问题

多层阴影怎么写?
用逗号分隔,如 text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.3)。
和 box-shadow 有什么区别?
text-shadow 作用于文字,box-shadow 作用于元素盒子。
是否联网?
不需要,本地处理。

延伸阅读

相关工具