chevron_right

Box Shadow 生成器

可视化创建CSS阴影效果，支持实时预览。

预设

Shadow {{idx + 1}}

H-Offset: 0px

V-Offset: 4px

Blur: 16px

Spread: 0px

颜色

内阴影

Outset

生成的CSS

box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.15);

相似工具

文字阴影生成器

通过实时预览创建 CSS text-shadow 效果。

Border Radius 生成器

可视化控制圆角效果并复制CSS代码。

CSS Clip-Path 生成器

生成带实时预览的CSS clip-path形状。

新拟态效果生成器

生成新拟态（Neumorphism）UI 样式的 CSS 代码。

Office 文件通用检查器

打开 DOCX、XLSX、PPTX、ODT、XPS、MHTML、CHM 和 Publisher 文件，在浏览器中查看其部件、关系与元数据。

FLAC 转 MP3 转换器

直接在浏览器中将无损 FLAC 音频文件转换为 MP3。比特率可调。完全私密。

灰度图像转换器

在浏览器中将任何图像即时转换为灰度。可选择亮度、平均、明度三种算法，强度可调。

apps

不用手写冗长 CSS，也能做出多层阴影

box-shadow 很容易写出第一版，但一旦要同时调整偏移、模糊、扩散、颜色和多层组合，手动改值就会变得很麻烦。这个可视化工具能让你更快找到合适的阴影效果。

你可以在这里调整什么

工具适合同时尝试细腻和明显的阴影样式，包括：

水平和垂直偏移
模糊半径与扩散半径
颜色和透明度
内阴影与外阴影
多层阴影叠加

常见使用场景

阴影生成器尤其适合这些情况：

为卡片设计层级感
给现代 UI 组件添加柔和阴影
测试内阴影和发光效果
生成可复用的设计系统 CSS

多层阴影要注意节制

叠加多层阴影可以带来更精致的深度感，但也很容易让画面变脏。做出满意效果后，最好再放到浅色和深色背景上看一遍，确认它仍然干净自然。