CSS 阴影生成器

可视化调节并复制 box-shadow 代码

返回工具列表

工具面板

本地处理
正在加载工具...
关于CSS 阴影生成器

水平/垂直偏移、模糊、扩展与颜色实时预览，可选内阴影。输出就是标准的 box-shadow 声明。

  • 1

    五个参数各管一件事：X / Y 偏移决定影子往哪边落，模糊半径（blur）把边缘晕开，扩散半径（spread）先把影子整体放大或缩小再模糊，颜色决定浓淡。

  • 2

    扩散可以为负：负值把影子收窄，适合做「贴着元素边缘」的细阴影；Y 为负时影子落在上方向。

  • 3

    颜色默认带透明度（#0f172a40 是 25% 不透明度），色板只改 RGB 部分、透明度保留原值——这样换色不会突然把影子变实。

相关工具

查看全部
设计工具

颜色选择器

选择并提取 HEX、RGB、HSL 颜色值

设计工具
颜色选择器
设计工具

颜色对比度

检查前背景色对比是否符合的可访问性标准

设计工具
颜色对比度
设计工具

渐变色生成器

可视化创建漂亮的 CSS 线性或径向渐变

设计工具
渐变色生成器
设计工具

单位换算

各领域物理单位的精准换算

设计工具
单位换算
设计工具

字节转换

在 B, KB, MB, GB, TB 间进行转换

设计工具
字节转换
设计工具

CSS 圆角生成器

可视化调节四角圆角并复制 border-radius 代码

设计工具
CSS 圆角生成器
设计工具

CSS 裁剪路径生成器

拖动顶点调整形状，复制 clip-path: polygon() 代码

设计工具
CSS 裁剪路径生成器
设计工具

CSS 缓动函数生成器

拖动控制点编辑 cubic-bezier 曲线，复制缓动代码

设计工具
CSS 缓动函数生成器