UUUP Tools

设计配色

CSS 阴影生成 - box-shadow 可视化工具

可视化调节偏移、模糊、扩散、颜色、透明度和内阴影，实时预览并生成 box-shadow CSS，适合卡片、按钮和浮层阴影调试。

快速切换→CSS 渐变生成
CSS阴影box-shadow
快速切换:CSS 渐变生成颜色格式转换毛玻璃效果生成

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接，或在支持的设备上调用系统分享。

设计配色

CSS 阴影生成

水平偏移 (X) 0px
垂直偏移 (Y) 10px
模糊半径 (Blur) 20px
扩散程度 (Spread) -5px
透明度 10%
预览 
 
  
 
   
 
   
 
 
 
 
 
   
 
使用场景
  • 给按钮或卡片添加外阴影
  • 调试悬浮层与描边式硬阴影
  • 勾选内阴影做内凹控件效果
 
如何使用
  1. 通过滑块调整 X/Y 偏移、模糊与扩散
  2. 选择阴影颜色与透明度，按需勾选内阴影
  3. 预览后复制 CSS 结果
 
 
 
示例输入输出
参数
X: 0, Y: 4, Blur: 6, Spread: -1, rgba(0,0,0,0.1)
CSS
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
 
FAQ
支持内阴影吗？
支持。勾选「内阴影 (Inset)」后会生成带 inset 关键字的 box-shadow，并实时更新预览。
可以多层阴影吗？
当前界面按单层参数生成；需要多层时，可多次调整后把多条 box-shadow 手动用逗号拼接。
 
 
 
 
工具列表
 
相关推荐
 
你可以从这里继续打开相近场景的工具，减少重复搜索。
 
 
 
 
 
 
CSS 渐变生成
 
CSS 渐变生成 - 线性径向锥形工具
 
  可用  
 
可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。
 
  CSS  渐变  背景  
 
  打开工具  
 
 
 
 
颜色格式转换
 
颜色格式转换 - HEX RGB HSL 在线工具
 
  可用  
 
在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。
 
  颜色  HEX  RGB  
 
  打开工具  
 
 
 
 
毛玻璃效果生成
 
毛玻璃效果生成 - backdrop-filter 工具
 
  可用  
 
可视化调节模糊、透明度、背景色与边框透明度，生成带 webkit 前缀的毛玻璃 CSS，适合卡片、导航栏与模态层样式。
 
  CSS  毛玻璃  backdrop-filter  
 
  打开工具