开发者免费本地运行
CSS 盒阴影生成器
使用实时预览设计 CSS 盒阴影值——偏移、模糊、扩展、不透明度和内阴影。
预览
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);调整滑块以设计阴影 — 当看起来正确时复制 CSS。
关于CSS 盒阴影生成器
Handytool 的盒阴影生成器为您提供偏移、模糊、扩展、颜色和不透明度的滑块——和一个实时预览卡片，当您拖动时更新。切换内阴影，通过拾色器调整颜色，并将生成的盒阴影 CSS 声明直接复制到您的样式表中。整个工具在您的浏览器中运行；不上传任何内容。
CSS 盒阴影生成器功能
- 01
每个参数都是滑块
水平和竖直偏移、模糊半径、扩展半径和不透明度各有自己的滑块加数字输入——用拖动微调，然后用键盘调整像素精度。
- 02
支持内阴影
切换内阴影按钮，在投影和内阴影之间切换——对于按下的按钮、凹陷的输入框和新拟物表面很有用。
- 03
颜色和不透明度分别控制
通过任何十六进制值在拾色器中选择基础颜色，然后独立调整不透明度。输出使用 rgba() 以便在复制 CSS 时颜色和 alpha 保持可读。
CSS 盒阴影生成器常见问题
- 扩展值有什么作用？
- 正扩展在应用模糊前在所有方向上扩大阴影；负扩展缩小它。当配对小模糊时对紧密、清晰的光晕很有用。
- 我可以添加多个阴影吗？
- 此生成器输出单个阴影声明。要分层阴影，复制该值，然后在 CSS 中用逗号分隔粘贴两次——盒阴影接受逗号分隔列表。
- 为什么我的内阴影不可见？
- 内阴影在元素内部绘制，所以它们需要背景颜色或内边距才能可见。它们也不会在透明或零大小的元素上显示。
- 预览像素精确吗？
- 是的——预览在真实元素上使用实际的 CSS 盒阴影属性，所以您看到的正是您的样式表将呈现的样子。