LocalTools离线浏览器工具合集

分类: 开发工具

CSS 文本阴影生成器

站方自主规划没找到想要的工具？

叠加多层 text-shadow 并复制 CSS

设置偏移量、模糊半径、颜色和不透明度，即可基于这一组基础值生成多层 text-shadow 声明，并提供实时预览和一键复制生成的 CSS。

阴影预览

输出
text-shadow:
  1px 1px 2px rgba(23, 33, 28, 0.5),
  1px 1px 4px rgba(23, 33, 28, 0.39),
  2px 2px 6px rgba(23, 33, 28, 0.28);

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

单独一层 text-shadow 看起来是扁平、边缘生硬的轮廓，而柔和的发光效果或叠加的投影效果则需要多层阴影，随着偏移和模糊逐层缩小，同时不透明度逐渐淡出。本工具会根据你设置的基础偏移量、模糊半径、颜色和不透明度推导出整套阴影层，采用的正是 box-shadow 阴影层生成器所用的同一种叠层手法，因此你只需要考虑一层阴影，而不必手写多个用逗号分隔的阴影。

使用方法

  1. 设置要生成的层数，以及基础偏移量和模糊半径。
  2. 选择颜色和不透明度。
  3. 查看实时预览，然后复制 text-shadow 声明。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

为什么增加层数会让阴影变得更柔和？
每多一层都会向文本方向逐渐缩小，同时不透明度逐渐淡出，因此多层叠加在一起看起来像是一段柔和的阴影渐变，而不是一份边缘生硬的复制品。
会向服务器发送内容吗？
不会。声明是在页面内根据你设置的数值计算出来的，这也是预览能即时更新的原因。
可以用这个做霓虹或发光效果吗？
可以。明亮的颜色配合较大的模糊半径和多层叠加会呈现出发光效果；较暗的颜色配合小偏移和低模糊则会呈现出更细微的深度阴影。

返回全部工具