适用于网站卡片的 CSS 阴影生成器
CSS 阴影生成器
CSS 盒阴影生成器：卡片实时预览 | We.Inc
创建多层 CSS 盒阴影，并在浅色和深色背景的服务卡片及定价卡片上预览，同时检查清晰可见的焦点状态。复制 CSS 和卡片组件。
在灰色方块上很难判断阴影效果。在这里，您可以调整多层 box-shadow，并在服务卡片和定价卡片上预览；还可切换浅色或深色页面，并按 Tab 测试键盘焦点环。效果合适后，复制 CSS 或整个卡片组件。所有操作都在浏览器中完成。您输入的内容不会发送给 We.Inc 或其他任何人；关闭标签页后，内容即会消失。
- 从预设开始，或调整第一层：水平和垂直偏移、模糊、扩展、颜色、不透明度及内阴影。
- 最多添加五层阴影。多层阴影（紧贴的一层加上范围更广、边缘更柔和的一层）比单一的大阴影看起来更自然。
- 在浅色和深色页面预览之间切换。按 Tab 将焦点移到卡片按钮上，检查焦点环是否仍清晰可见。
- 如果阴影在所选背景上太淡而难以看见，或卡片文字低于 WCAG AA 对比度要求，检查结果会发出提醒。
- 复制 box-shadow 声明，或复制包含 HTML 和 CSS 的完整卡片组件。
- 在深色背景上，阴影几乎会消失。可以改用稍亮的卡片颜色或细边框来区分卡片。
- 阴影颜色可稍微偏向背景色，而不是纯黑，视觉会更柔和。
- 不要只靠阴影表示焦点状态，也要添加清晰的轮廓线。
- 较大的模糊值需要更多绘制资源。避免在长列表中为其添加动画。
- 整个网站使用一到两级阴影，这样深浅层级才有意义。
常见问题
CSS 的 box-shadow 属性如何工作？
box-shadow 接受水平偏移、垂直偏移、可选的模糊半径、可选的扩展值和颜色；内阴影还可以使用 inset 关键字。可以用逗号分隔多个阴影；最前面的阴影会绘制在最上层。
为什么多层阴影看起来更好？
现实物体靠近边缘处会投下清晰阴影，较远处则是柔和、范围更大的阴影。叠加两三层逐渐增加模糊度、同时降低不透明度的阴影，可以模拟这种效果。
为什么我的阴影在深色背景上看不见？
深色页面上的深色阴影几乎没有对比度。工具会提醒您这一点。可以用更浅的表面颜色或细微边框来抬高卡片层次。
box-shadow 会影响无障碍体验吗？
阴影属于装饰，因此本身不需要满足对比度规则。重要的是卡片上的文字清晰可读，并且焦点通过可见轮廓显示，而不只是改变阴影。
CSS 阴影生成器免费吗？
免费，无需注册。您可以将代码复制到任何项目中。
在准备发布的组件上测试阴影
- 单独方块上的阴影看起来合适，放到一排定价卡片上可能会显得厚重，放在照片下又可能消失。在小型企业网站常用的卡片上预览效果，例如带图标的服务卡片和突出显示的定价方案，才能看到实际呈现效果。
- 组件代码包含 focus-visible 轮廓，因此无论选择哪种阴影，键盘用户都能正常使用卡片。
免费开始 · 无需信用卡
Product
Who It's For
Features
Resources
Company
View Sitemap