CSS 阴影生成器

← ToolBox / CSS 阴影生成器

🎭 CSS Shadow Generator

盒子阴影
文字阴影
Preview

✨ 预设效果

Click a preset to apply its shadow.

📐 计算公式 / 原理
按 offset / blur / spread / color 拼装 box-shadow（支持外阴影与 inset 内阴影），提供常用预设并实时预览；用于 UI 质感设计。

💡 使用说明

📚 深度解析：CSS 阴影生成器

💡 常见使用场景

  • 卡片投影。
  • 按钮悬浮。
  • 凹陷效果。
生成柔和阴影
<p><strong>输入：</strong>y8 模糊24 色淡。</p><p><strong>处理：</strong>拼 box-shadow。</p><p><strong>输出：</strong>CSS 与预览。</p>

❓ 常见问题（FAQ）

多层怎么写？
逗号分隔多个 shadow 值即可叠加。
阴影方向怎么定？
由 x/y 偏移决定，正向右下、负向左上；调正负即改光源方向。
会保存或上传我的内容吗？
结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
⚠️ 使用说明与注意事项

🔗 相关工具

📈 CSS动画生成器（关键帧可视化） - 免费在线工具，纯前端处理 | ToolBox免费在线工具箱CSS动画生成器（关键帧可视化） 🎵 Web Audio 节拍器 - 免费生成器工具，在线节拍器 | ToolBox免费在线工具箱在线节拍器 🔳 二维码生成器（已有，可加强定制） - 免费在线工具，纯前端处理 | ToolBox免费在线工具箱二维码生成器（已有，可加强定制） 🏷️ 条形码生成器（EAN-13等） - 免费在线工具，纯前端处理 | ToolBox免费在线工具箱条形码生成器（EAN-13等） 📈 盒子阴影生成器（可视化调整） - 免费在线工具，纯前端处理 | ToolBox免费在线工具箱盒子阴影生成器（可视化调整）
📖关于「CSS 阴影生成器」 ▼

📝工具简介

CSS 阴影生成器。设计创意工具，可视化操作，一键生成 CSS 代码。

✨功能特点

🎯使用场景