CSS 阴影生成器CSS Shadow Generator
可视化生成CSS box-shadow代码Visually generate CSS box-shadow code.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.25);
预设样式
关于 CSS 阴影生成器About CSS Shadow Generator
合适的 box-shadow 能让卡片、按钮瞬间拥有层次感与质感。本工具可视化调节阴影的水平/垂直偏移、模糊半径、扩展半径与颜色，支持多层阴影叠加与内阴影，实时生成 CSS 代码。The right box-shadow instantly gives cards and buttons depth and polish. This tool visually tunes horizontal/vertical offset, blur, spread and colour, supports stacked multi-shadows and inset shadows, and generates CSS code live.
使用方法How to Use
- 调整水平/垂直偏移决定阴影方向。Adjust horizontal/vertical offset to set the shadow direction.
- 调整模糊与扩展半径控制阴影的柔和度与范围。Tune blur and spread to control softness and reach.
- 选择阴影颜色与透明度，需要内阴影时勾选 inset。Pick the shadow colour and opacity; tick inset for inner shadows.
- 复制生成的 box-shadow 代码使用。Copy the generated box-shadow code.
常见问题FAQ
怎样让阴影看起来自然？How do I make shadows look natural?
使用低透明度黑色（如 rgba(0,0,0,0.1)）、较大模糊、较小偏移；叠加一深一浅两层阴影会更接近真实光照。Use low-opacity black (e.g. rgba(0,0,0,0.1)), large blur and small offset; stacking a tight and a soft shadow approximates real lighting.
inset 阴影有什么用？What is an inset shadow for?
inset 把阴影绘制在元素内部，常用于输入框凹陷感、压印文字等拟物效果。inset draws the shadow inside the element, commonly used for pressed input fields and embossed effects.
大量阴影会影响性能吗？Do many shadows hurt performance?
阴影会触发额外绘制，在长列表或低端设备上大面积阴影可能掉帧；可减小模糊半径、用预渲染图或仅在悬停时显示。Shadows cost extra painting; large blurs on long lists or low-end devices can drop frames. Reduce blur, use pre-rendered images, or show shadows only on hover.
相关阅读Related Reading
CSS box-shadow 从入门到拟物：多层阴影、内阴影与渲染性能CSS box-shadow From Basics to Skeuomorphism: Layered Shadows, Inset Shadows and Rendering Performance
`box-shadow` 是前端最常用的视觉工具之一，但五个参数的含义、多层叠加的技巧和性能陷阱并不总是被讲清楚。本文从语法拆解到拟物质感，再到什么时候该用图片代替阴影。`box-shadow` is one of the most-used visual tools in frontend, but the meaning of its five parameters, multi-layer stacking techniques and performance pitfalls are not always clearly explained. This article goes from syntax breakdown to skeuomorphic texture, and covers when to replace shadows with images.
CSS 渐变进阶：linear-gradient 的角度、色标位置与 5 个常用视觉效果Advanced CSS Gradients: Angles, Colour-Stop Positioning and 5 Useful Visual Effects
`linear-gradient` 看似简单，但角度基准、色标位置和多层叠加里藏着不少细节。本文从原理讲起，给出 5 个可直接复制的视觉效果代码，并讨论性能与兼容性。`linear-gradient` looks simple, but the angle baseline, colour-stop positions and multi-layer stacking hide plenty of detail. This article starts from first principles, gives five copy-paste-ready visual effects, and discusses performance and compatibility.