CSS Box Shadow生成器 - 可视化创建阴影 在线
用可视化控件设计CSS box shadow。创建多层阴影、拟态效果，复制即用CSS代码。
常见问题
什么是 CSS box-shadow？
CSS box-shadow 是一个在元素框架周围添加阴影效果的属性。它可以在网页设计中创建深度、高度和视觉层次。该属性接受多个参数：水平偏移、垂直偏移、模糊半径、扩展半径、颜色，以及用于内阴影的可选 inset 关键字。
如何使用这个 box shadow 生成器？
调整滑块设置水平/垂直偏移、模糊、扩展和不透明度。使用颜色选择器选择阴影颜色。如果需要内阴影，请切换 Inset。添加多个图层以获得复杂效果。将生成的 CSS 代码复制到您的样式表中。
什么是新拟态？
新拟态（或 Soft UI）是一种设计趋势，通过结合两个阴影创建柔软、凸起的塑料外观：一个浅色阴影（模拟光源）和一个深色阴影（模拟阴影）。为了使效果正常工作，背景颜色需要与元素颜色匹配或互补。
如何创建平滑、逼真的阴影？
逼真的阴影使用多个图层，模糊和偏移逐渐增加。此工具的 Layered 预设通过堆叠多个阴影图层自动创建此效果。您也可以手动添加图层并逐步调整其值。
什么是内阴影？
内阴影出现在元素框架内部而不是外部。它创建按下或雕刻的效果，通常用于输入字段、按下状态的按钮或容器凹槽。切换 Inset 复选框以启用此效果。
这个工具安全且保护隐私吗？
是的。此工具使用客户端 JavaScript 100% 在您的浏览器中运行。阴影配置或设计数据永远不会发送到任何服务器。您的工作完全保留在您的设备上，确保所有设计工作的完全隐私。
代码示例
// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
return layers.map(layer => {
const inset = layer.inset ? 'inset ' : '';
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Usage
const shadow = generateBoxShadow([
{ offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
{ offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)