a11y.skipToMainContent
1

CSS 文本阴影生成器

Craft CSS文本阴影可视化——堆栈层,尝试预设,并复制干净的文本阴影 CSS.

px

Presets

Shadow layers

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Text Shadow Generator

  1. 键入您的样本文本并选择预览的文本和背景颜色.
  2. 添加阴影层并调整每层的X,Y,模糊,颜色和α.
  3. 或点击一个预设——霓虹,3D,轮廓,倒转或起火——来装入一现成的地层集.
  4. 单击 CSS 复制以抓取逗号分隔的文本阴影声明 .

{姓名}是什么来着?

CSS text-shadow 属性在文本后添加了一个或多个阴影,每个阴影由X偏移,Y偏移,模糊半径和颜色定义. 通过堆放数个逗号分隔的阴影,您可以建立光线,硬3D外观,轮廓等单个声明的效果.

. 这个生成器让每个阴影都拥有完全控制偏移,模糊和色彩α的层,再加上一击预设的霓虹光,长的3D阴影,轮廓,回转和火. 选择您的文本和背景颜色来预览上下文中的效果, 然后复制最后的 < code> text- shadow CSS.

Advertisement

FAQ

我要怎么堆叠多个文本阴影?
将每个阴影用逗号分隔在单一文本阴影声明内,例如: 1px 1px 0 #000, 2px 2px 0 #555. 浏览器按照顺序来画出它们,因此更早的影子坐在顶上. 此工具在您添加层时为您构建一个逗号分隔列表 .
我能创造出闪发光的霓虹效应吗?
对 霓虹花光是数个模糊的同色亮光的阴影,没有相抵,从紧凑的内光线堆叠到宽阔的外光环. 以"霓虹"发光预设为起点,再将模糊和颜色来调味.
文本阴影是否在任何地方都得到支持 ?
是的,每个现代浏览器都支持文本阴影,没有供应商前缀,包括多层逗号分隔的阴影.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement