CSS文本阴影生成器
使用最多四层偏移、模糊、颜色和不透明度构建CSS text-shadow — 在您自己的文本上进行实时预览，然后复制声明、完整的CSS规则和HTML。
输入
仅用于预览和HTML片段 — 阴影适用于任何文本。
图层以逗号分隔；列出的第一个图层在最上面绘制。
阴影在深色和浅色背景上的显示效果差异很大 — 请与您的页面匹配。
在100%以下的不透明度下，颜色写为rgba()。
输出
您的阴影文本将显示在此处。
text-shadow声明
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-shadow-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "NEON",
"fontSize": "96",
"fontFamily": "sans",
"fontWeight": "400",
"textColor": "#ffffff",
"bgColor": "#0b0b1a",
"layers": "4",
"offsetX1": "0",
"offsetY1": "0",
"blur1": "4",
"color1": "#ffffff",
"opacity1": "100",
"offsetX2": "0",
"offsetY2": "0",
"blur2": "10",
"color2": "#ff00de",
"opacity2": "100",
"offsetX3": "0",
"offsetY3": "0",
"blur3": "20",
"color3": "#ff00de",
"opacity3": "100",
"offsetX4": "0",
"offsetY4": "0",
"blur4": "40",
"color4": "#ff00de",
"opacity4": "100"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-text-shadow-generator` tool (CSS Text Shadow Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-text-shadow-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS文本阴影生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS text-shadow属性虽小但多功能。一个图层提供柔和的投影。堆叠多个图层会产生霓虹色光晕、粗糙的复古3D字母、清晰的轮廓或压印的活版印刷效果。困难的部分是数字：每个图层有两个偏移、模糊半径和颜色，只有当您看到图层相互作用时，效果才会完美呈现。该生成器让您使用滑块调整每个图层，在您自己的文本上查看结果，并复制可以立即使用的CSS。
如何使用
- 输入您的示例文本并选择字体、粗细和大小。它们仅影响预览和HTML片段，因为阴影适用于任何文本。
- 设置文本和背景颜色以匹配您的页面。在深蓝色上看起来很棒的光晕可能在白色上消失。
- 选择您想要的阴影图层数 (1–4)。每个图层都有自己的控件：
- 水平/垂直偏移：阴影向右/向下移动的距离（负值向左/向上移动）。
- 模糊半径：0给出硬边缘副本，较高的值将其软化为光晕。
- 阴影颜色+不透明度：100%以下的不透明度，颜色写为
rgba()。
- 复制输出。 您将获得单行
text-shadow声明、完整的CSS规则（字体、颜色和阴影）以及匹配的HTML片段。
单击尝试示例以加载四层霓虹色光晕，这是快速查看堆叠图层如何组合的方法。下面的配方为其他经典外观提供了确切的值。
分层文本阴影如何工作
text-shadow采用逗号分隔的阴影列表，每个都写为offset-x offset-y blur-radius color。列表中的第一个阴影在顶部绘制，每个后续的阴影都位于前一个后面。这种排序使经典效果成为可能：
- 霓虹光晕：零偏移，模糊递增：
0 0 4px #fff，然后0 0 10px、0 0 20px和0 0 40px使用#ff00de等亮色。这会创建一个在字母附近明亮并向外淡化的光晕。在深色背景上使用。 - 复古3D：硬阴影（模糊0）按对角线排列深化阴影（
2px 2px 0、4px 4px 0、6px 6px 0）拉伸字母。最后一个模糊的半透明图层（10px 10px 8px，30%黑色）为它们打下基础。 - 轮廓：四个硬阴影（
-2px -2px 0、2px -2px 0、-2px 2px 0、2px 2px 0）在字形周围描绘笔触。与-webkit-text-stroke不同，这在任何地方都有效。 - 活版印刷：浅色
0 1px 0阴影（80%白色）加上其上方的深色0 -1px 0（20%黑色）使文本看起来被按入页面。在中灰色背景上效果最好。
与box-shadow不同，text-shadow没有扩展值，也没有inset关键字。如果您需要为卡片或按钮提供这些功能，请使用CSS盒阴影生成器代替。
性能和可访问性提示
- 大文本块上的大模糊半径会消耗绘制时间。将重型多图层光晕保留用于标题而不是正文。
- 阴影不计入文本对比度。确保文本颜色本身与背景的对比度足够高，因为阴影可能会降低小尺寸的可读性。
- 有关动画效果，请查看CSS毛刺文本生成器；有关字母内部而非周围的颜色，请尝试渐变文本CSS生成器。
隐私
一切都在您的浏览器中运行。您的文本和设置永远不会被上传。
neon textglow effect3d textretro textoutline textletterpresstypographyfont effectdrop shadowrgba