CSS 文字阴影生成器
新调校 CSS 文字阴影，实时预览并复制代码。
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
通过实时预览设计CSS文字阴影
这款CSS文字阴影生成器让您可以直观地设计深度、发光和描边效果，并复制生产就绪的CSS代码。直接点击大号预览区输入您的文字，拖动偏移量、模糊度和透明度滑块，选择颜色，实时观察text-shadow在您文字上的变化效果。
更改字体系列、大小和粗细，设置文字颜色，在浅色、灰色、深色和棋盘格背景之间切换，精确查看阴影在不同背景下的表现——这对于霓虹文字和发光文字效果尤为重要，因为它们只在深色背景上才能正确显示。
text-shadow语法详解
单个CSS阴影的写法为text-shadow: offset-x offset-y blur-radius color。offset-x和offset-y控制阴影的水平和垂直位移（负值向上或向左投射），blur-radius柔化边缘（0保持锐利），颜色决定色调——通常用半透明黑色表现细腻深度，用鲜亮颜色制造发光效果。
经典易读的阴影为text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)。将两个偏移量都设为0并增大模糊度，可获得文字周围的柔和光晕。配合亮色（如#00eaff）和递增的模糊值，即可制造霓虹发光效果。
叠加多层阴影：霓虹、3D、描边和长阴影
text-shadow的真正威力在于叠加。您可以在一条声明中用逗号分隔多个文字阴影，浏览器依次渲染每一层。叠加多个相同亮色、模糊度递增的阴影可创建霓虹/发光文字效果；沿右下方向逐步加深偏移颜色可构建3D立体文字；在十层以上重复同一扁平偏移形成长阴影；在字形周围放置四到八个硬质阴影则产生描边文字。
使用预设库——柔和、霓虹、发光、3D、长阴影、描边、复古、火焰和Letterpress——作为起点，一键加载完整阴影组合，然后自由增删调整各层。
复制CSS、Tailwind或React Native代码
按项目需求导出。复制CSS获取标准text-shadow声明；复制Tailwind生成任意属性类如[text-shadow:2px_2px_4px_#00000066]，与Tailwind v4原生text-shadow-*工具类兼容；复制React Native将第一层转换为textShadowColor、textShadowOffset和textShadowRadius。
关于浏览器兼容性的好消息：text-shadow已完全标准化，所有现代浏览器均无需-webkit-或-moz-前缀。
与CSSmatic、css.generator.cool等工具的对比
大多数在线CSS文字阴影工具只支持单层阴影。CSSmatic的文字阴影区域提供一组滑块——适合基础阴影，但无法叠加多层实现霓虹或3D效果，必须手动编写额外声明。
UtiloKit集多层叠加、九个一键加载完整阴影组合的预设、可编辑实时预览、三种格式（CSS、Tailwind、React Native）一键复制以及可分享链接于一体——无需注册，不上传文件。
text-shadow与box-shadow的区别
这是常见混淆点：text-shadow跟随字形（字母）的轮廓，而box-shadow跟随元素的矩形盒子。text-shadow没有扩展半径，也没有inset关键字——因此文字阴影不能像box-shadow那样内嵌。在标题、Logo和标签上使用text-shadow，在卡片和按钮上使用box-shadow。
如果您想在文字上制造内嵌或压印效果，技巧是在深色文字正下方放置浅色阴影（参见Letterpress预设），而非真正的inset。对于较粗的文字轮廓，-webkit-text-stroke属性比叠加八个方向阴影更简洁。
易读阴影技巧——以及隐私保护
阴影是视觉点缀，不是对比度的替代。对于照片上的文字，单个低透明度阴影如0 1px 3px rgba(0, 0, 0, 0.5)可在不影响视觉的情况下提升可读性。将厚重的霓虹和3D效果留给大型展示标题，并始终验证文字对比度是否符合WCAG标准。
无需安装，无需创建账户。每次预览和生成的CSS都在您的浏览器本地运行，输入的文字永远不会离开您的设备。
Frequently asked questions
如何应用文字阴影？
在任意文字元素上添加CSS属性text-shadow。简写形式为text-shadow: offset-x offset-y blur-radius color——例如text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)，阴影向右2px、向下2px，模糊度4px。在本工具中，在实时预览区输入文字、拖动滑块，点击复制CSS即可。
CSS中的text-shadow是什么？
text-shadow是CSS属性，在元素文字后面绘制一个或多个阴影。每个阴影接受最多四个值：水平偏移(X)、垂直偏移(Y)、可选模糊半径和颜色——写为text-shadow: 1px 1px 2px #000000。
如何在CSS中添加阴影？
对于文字，在元素规则中使用text-shadow，如h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }。对于盒子、卡片和按钮，使用box-shadow。text-shadow跟随字母形状，box-shadow跟随元素的矩形盒子。
如何在设计工具中为文字添加阴影？
在Figma、Sketch或Photoshop等设计工具中，为文字图层添加投影效果，设置X/Y偏移、模糊度和颜色。这四个值几乎一一对应CSS：Figma中X 2、Y 2、模糊4、黑色40%对应text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)。
如何创建发光或霓虹文字效果？
霓虹发光是将多个相同亮色阴影以零偏移和递增模糊度叠加而成。例如：text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; 白色文字配深色背景。点击这里加载霓虹预设立即获得。
如何创建3D文字或长阴影效果？
两种效果都使用多个有偏移但无模糊的阴影。3D立体文字：叠加向右下方递进、颜色逐渐加深的层次。长阴影：每次重复相同扁平偏移超过十层。3D和长阴影预设自动构建这些层次。
如何用text-shadow创建描边文字？
在文字周围四个（或八个）方向放置模糊度为0的硬质阴影。例如：text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; 为白色文字添加细黑描边。
如何创建多个文字阴影？
在单条text-shadow声明中用逗号分隔：text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;。浏览器按顺序绘制，第一个阴影在最上层。霓虹、3D、火焰和描边效果都是这样构建的。
text-shadow可以是inset（内阴影）吗？
不能。与box-shadow不同，text-shadow属性没有inset关键字，也没有扩展半径。要在浅色背景上模拟压刻效果，可在深灰色文字正下方添加微妙浅色阴影，如text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);。Letterpress预设展示了这一技巧。
如何在Tailwind CSS中设置文字阴影？
Tailwind CSS v4包含原生文字阴影工具类（text-shadow-sm、text-shadow-md、text-shadow-lg）。自定义值使用任意属性，空格变为下划线：class="[text-shadow:2px_2px_4px_#00000066]"。本工具的复制Tailwind按钮自动生成该类。
text-shadow需要-webkit-或-moz-前缀吗？
不需要。text-shadow已完全标准化，所有现代浏览器均支持无前缀写法，直接写text-shadow: 1px 1px 2px #000;即可。
text-shadow和box-shadow有什么区别？
text-shadow从字形（字母本身）形状投射阴影，box-shadow从元素的矩形盒子投射阴影。text-shadow没有扩展半径和inset选项；box-shadow两者都有。
如何添加细微阴影提升文字可读性？
使用小偏移量和少量模糊像素的低透明度暗色阴影，例如text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);。这能让白色或浅色文字从照片或渐变背景中凸显，提升对比度。
与CSSmatic等其他text-shadow工具相比如何？
CSSmatic有文字阴影功能，但只支持单层——无法叠加多层实现霓虹、3D或描边效果，必须手动编辑代码。UtiloKit是唯一集多层叠加、命名预设、实时预览以及CSS/Tailwind/React Native一键导出于一体的免费工具。
如何复制生成的文字阴影CSS，离线可用吗？
点击复制CSS获取可直接粘贴的声明，复制Tailwind获取任意属性类，复制React Native获取textShadowColor/textShadowOffset/textShadowRadius等价代码。使用分享链接将精确设置保存到URL。全部免费、无需注册、本地运行，加载后离线也可使用。
