跳到工具
JoeLucky

点击工具页的「收藏」加入

工具类别

代码截图CSS 渐变生成器玻璃拟态生成器Box Shadow 生成器CSS 加载动画SVG Blob 生成器SVG 转 PNG颜色对比度检查工具PX/REM/EM 转换器
JoeLucky

实用好用的在线工具集合站

隐私政策服务条款

© 2026 JoeLucky®. 版权所有。

  1. JoeLucky
  2. /CSS 与设计
  3. /Box Shadow 生成器

Box Shadow 生成器

交互式调整阴影效果,实时预览 CSS 输出

预览元素
0px 4px 24px 0px

调整选中图层

0px
4px
24px
0px
15%
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);

相似CSS 与设计

查看全部
代码截图

将代码转成美观的分享图片,支持多种主题

打开 →
CSS 渐变生成器

可视化设计线性、放射、圆锥渐变,即时复制 CSS 代码

打开 →
玻璃拟态生成器

实时预览玻璃拟态效果,一键复制 CSS 代码

💬 用户留言

?

还没有留言,抢先留下你的想法!

什么是Box Shadow 生成器?

Box Shadow 生成器可让您用滑块实时调整阴影效果,支持多图层阴影叠加,并提供 Material、Neumorphism、Neon 等 8 种精选预设,调整好后可直接复制 CSS 代码。

功能说明

  1. 5 个可调参数:X 偏移(左右)、Y 偏移(上下)、模糊半径(边缘柔化程度)、扩展半径(整体大小)、不透明度,各有独立滑块。
  2. 多图层阴影:点击“添加阴影图层”可叠加多个阴影,实际设计中常用 2–3 层阴影叠加来产生更自然的立体感(如 Material Design 规范)。
  3. Inset 内阴影:勾选 Inset 可将阴影翻转到元素内部,常用于制作按压感按钮或凹陷卡片效果。
  4. 3 种预览背景:可在浅色、深色、渐变背景间切换,以便在不同底色下确认阴影效果是否理想。
  5. 8 种精选预设:Flat(无阴影)、Subtle(柔和阴影)、Card(卡片)、Material(Material Design 三层)、Dramatic(大景深)、Neon Blue(霓虹)、Neumorphism(新拟态)、Inset(内阴影)。
  6. 一键复制 CSS:输出完整的 box-shadow: ...; 语法,可直接粘贴到 CSS、Tailwind 的 style 属性或任何设计工具中。

如何使用?

  1. 用滑块调整偏移、模糊、扩展与不透明度,预览区会实时更新。
  2. 需要更自然的立体感时,添加多个阴影图层,或勾选 Inset 制作内阴影。
  3. 点击复制,将 CSS 粘贴到项目中。

常见问题

Box Shadow 生成器有哪些设置选项?

X/Y 偏移、模糊半径、扩展半径、颜色(含透明度)、inset 内阴影,并支持多层叠加。

可以同时设置多个阴影吗?

可以,点击“添加阴影”即可叠加多个 box-shadow 设置。

生成的 CSS 如何使用?

复制输出的 CSS 语法,直接粘贴到 CSS 文件或内联样式中。

打开 →