0

Soft CSS Box Shadow — 现成代码

直观地构建 CSS 框阴影代码:用于偏移、模糊、扩散、不透明度颜色、插入模式和最多四层的滑块(带实时预览)。

0px
4px
12px
0px
0.25
处理中... 0%

结果

此页面打开预加载了柔和阴影的框阴影生成器:无水平偏移、向下 8 像素、宽大的 24 像素模糊和低 12% 的黑色不透明度。预览卡会立即渲染它——轻推任何滑块,CSS 线就会实时跟随。

软阴影是现代界面的主力。大的模糊与低不透明度相结合,可以将卡片从页面上抬起,而无需绘制清晰的轮廓,这就是为什么大多数设计系统将其高程阴影精确地保持在这个范围内,而不是早期平面设计的密集、深色阴影。

将框阴影线直接复制到样式表中,或最多堆叠三层以获得更丰富的高度。生成器完全在您的浏览器中运行 - 任何地方都不会上传任何内容。