CSS 盒子阴影生成器 (Box Shadow Studio)
可视化调配 CSS 盒子阴影属性，支持水平/垂直偏移、模糊半径、扩散半径、颜色透明度、内阴影 (Inset) 及多层阴影叠加，一键生成 CSS 与 Tailwind 代码。
// 实时阴影渲染舞台 (Shadow Stage)
舞台背景:
深空黑
板岩灰
浅灰白
纯白
{{ currentShadowSummary }}
{{ layers.filter(l => l.enabled).length }} 层阴影叠加
盒子颜色:
盒子尺寸:
圆角:
图层 #{{ idx + 1 }} {{ layer.inset ? '(Inset)' : '' }}
{{ layer.enabled ? '👁️' : '🙈' }}
水平偏移 (Offset X)
{{ activeLayer.x }}px
垂直偏移 (Offset Y)
{{ activeLayer.y }}px
模糊半径 (Blur Radius)
{{ activeLayer.blur }}px
扩散半径 (Spread Radius)
{{ activeLayer.spread }}px
阴影色彩 & 不透明度
{{ activeLayer.color }}
💡 光源罗盘控制器
拖拽小黄点调整光照方向
🎨 经典阴影预设库 (Curated Shadow Presets)
点击即刻载入预设阴影
{{ preset.name }}
// CSS / Tailwind 属性输出
📋 复制 CSS box-shadow
⚡ 复制 Tailwind 类
/* Standard CSS */
box-shadow: {{ fullBoxShadowValue }};
/* Cross-browser Prefix */
-webkit-box-shadow: {{ fullBoxShadowValue }};
box-shadow: {{ fullBoxShadowValue }};
/* Tailwind Arbitrary Shadow */
shadow-[{{ fullBoxShadowValue.replace(/\s+/g, '_') }}]
📐 CSS box-shadow 属性规则详解
CSS box-shadow 语法结构：[inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>。
多层阴影叠加原理 (Layered Shadows)
在现实世界中，光线扩散会产生自然衰减。Stripe 和 Tailwind 的高质感阴影通过同时叠加一层“近距离高不透明度细阴影”与一层“远距离大范围低不透明度漫反射阴影”，能让 UI 元素显得格外柔和逼真。
内阴影 (Inset Shadow) 与新拟态
添加 inset 关键字可将阴影绘制在边框内部，常用于创建被按下的按钮、凹陷的输入框 (Recessed input) 或柔和的新拟态 (Neumorphism) 凹凸质感。
拓展时间: 2026-08-31