什么是CSS盒子阴影生成器？
CSS Box 阴影生成器是 CSS Box-Shadow 属性的可视化编辑器。 用滑块调整偏移、模糊半径、展开半径、颜色和不透明度，并在预览元素上实时渲染结果，然后复制确切的 CSS。 而不是猜测像素值并重新加载页面，您可以直接塑造阴影并读取它产生的代码。
CSS 盒子阴影生成器打开这个,它开始于卡片预设,复制为盒子阴影的两层:0px 4px 6px -1px #0000001a,0px 2px 4px -2px #0000001a;。不透明滑块烘烤成六角色,所以 10% 成为最后的 1a。点击内在预设,声明更改为盒子阴影:插入 0px 2px 4px 0px #00000033;,按下的按钮看。添加图层在 0px 4px 6px 0px #00000033 处附加一个阴影,列在最后,画在其他下面。
Box-shadow 属性看似深沉。 单个声明可以堆叠多个阴影，每个阴影都有自己的偏移量、模糊、扩展、颜色和可选的 inset 关键字，该关键字将元素内部而不是外部绘制。 真正的界面阴影几乎总是使用两个或更多层来看起来自然，这对手写来说很乏味。 此工具为您管理层并以正确的逗号分隔顺序输出规范有效的声明。
一切都发生在您的浏览器中。 选择一个预设，调整图层，在浅色和深色背景之间切换预览，并复制标准属性或还包含 -webkit- 前缀的块。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。
影子画在盒子外面,不占空间,所以它们从不推动邻居,并且会被任何隐藏溢出的祖先夹住。传播是最不被理解的值:它在模糊之前会生长或缩小阴影形状,因此零模糊的正传播给出坚实的偏移轮廓,这就是边界效果的伪造方式,而不影响布局。Inset 将阴影移动到元素内部,对按压状态和内部光泽有用。以增加偏移和模糊的方式分层几个阴影是构建令人信服的深度,因为单个大模糊读取为雾而不是阴影。每一层都需要渲染时间,并且在滚动或动画期间重新绘制的阴影是低功耗设备上常见的 jank 来源。
如何使用CSS Box阴影生成器？
从预设或空白层开始
Card 预设上打开页面, 选择另一个如 Elevated 或 Neumorphic 不同的起点, 或直接编辑当前图层。
用滑块调整阴影
拖动水平和垂直偏移、模糊半径和展开半径滑块,设置阴影颜色和不透明度,并勾选 Inset 以将阴影移动到盒子内部。
如果需要，堆叠更多层
击添加图层以获取深度 - 在较暗的图层下,一个柔和的宽阴影读作自然高程。新的图层在末尾进行,这会将它们涂在早期的图层下方;没有重新排序,因此要移动图层,请将其与其垃圾桶图标一起删除,并用添加图层重建。
复制CSS
复制 Box-Shadow 声明或旧版浏览器的前缀块，并将其直接粘贴到样式表或组件样式中。
主要特点
多层阴影
按正确的从上到下的绘画顺序，将任意数量的阴影层叠加到一个声明中，这就是真实卡片和模态高程的构建方式
全面财产控制
用于水平和垂直偏移、模糊半径和扩展半径的滑块，加上颜色选择器、不透明度控件和嵌入切换覆盖语法的每个部分
实时预览
编辑时，预览元素会立即更新，您可以在明暗之间切换其背景以检查阴影在两个主题中的读取方式
现成的预设
精致、卡片、高架、浮动、内、发光、光影和锐利阴影的精心策划配方，为您提供了一个经过验证的起点，而不是空白画布
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!