CSS 阴影生成器

什么是在线 CSS 阴影生成器？

CSS 阴影生成器 是一款功能全面的免费在线工具，帮助你通过可视化调节为网页元素添加 CSS box-shadow 和 text-shadow 阴影效果。无需编写代码，通过滑块和参数面板实时调整，一键生成可直接使用的 CSS 代码。

核心功能

• 7 项基本参数 — X/Y 偏移（-100~100px）、模糊半径（0~100px）、扩散半径（-50~50px）、阴影颜色、透明度（0~100%）、内阴影 inset 开关
• 8 种预设方案 — 悬浮卡片、新拟态、弥散阴影、内发光、硬阴影、双层阴影、彩色阴影、按钮按下
• 12 种设计风格 — 漂浮、凸起、凹陷、柔和、锐利、发光、霓虹、浮雕、双层、长影、内陷、辉光
• 多层阴影叠加 — 最多 5 层阴影，每层独立调节，支持拖拽排序
• HSL 颜色模式 — 支持 Hex 和 HSL 两种颜色调节方式，双向同步
• 新拟态一键生成 — 输入主色自动计算亮阴影和暗阴影
• 层级阴影自动生成 — 基于当前参数生成 Low/Medium/High 三组代码
• Hover 动画预览 — 模拟阴影在悬停时的过渡效果
• 多种输出模式 — 支持 WebKit 前缀、CSS 变量输出、text-shadow 模式切换
• 截图导出 — 将预览效果导出为 PNG 图片

使用方法

• 调节参数 — 使用滑块或数字输入框调节阴影的各个参数，预览区域实时反映变化
• 选择预设/风格 — 从预设下拉框或风格标签中选择，快速应用常用阴影组合
• 管理多层阴影 — 点击"添加阴影层"按钮增加层数，拖拽排序，每层可独立删除
• 复制代码 — 点击工具栏的"复制CSS"按钮或代码区域旁的复制按钮
• 保存分享 — 参数自动保存到浏览器本地，也可以通过 URL Hash 分享配置

隐私保护

所有处理完全在您的浏览器中完成，数据不会上传到任何服务器。您可以放心使用。