阴影生成器

此工具允许您构建 CSS box-shadow 效果,以向 CSS 对象添加阴影效果。

阴影生成器使您可以向元素添加一个或多个阴影。

打开工具后,您会在工具的右上方找到一个矩形。这就是您要应用阴影的元素。当此元素被选中(如您首次加载页面时)时,您可以对其应用一些基本样式

  • 使用颜色选择器工具设置元素的 color
  • 使用“边框”复选框为元素设置 border
  • 使用滑块设置元素的 topleftwidthheight 属性。

要添加阴影,请点击左上方的“+”按钮。这会添加一个阴影,并在左侧的列中列出它。现在您可以设置新阴影的值

  • 使用颜色选择器工具设置阴影的 color
  • 使用“inset”复选框将阴影设置为内阴影。
  • 使用滑块设置元素的位置、模糊和扩展。

要添加另一个阴影,请再次点击“+”。现在您设置的任何值都将应用于此新阴影。使用左上方的↑和↓按钮更改这两个阴影应用的顺序。通过点击左侧列中的阴影再次选择第一个阴影。要更新元素自己的样式,请通过点击顶部标记为“元素”的按钮来选择它。

您可以向元素添加 ::before::after 伪元素,并为它们也添加阴影。要切换元素及其伪元素,请使用顶部标记为“元素”、“:before”和“:after”的按钮。

右下角的框包含元素和任何before::::after伪元素的 CSS。

另请参阅

边框图像生成器

此交互式工具允许您以可视方式创建边框图像(border-image 属性)。

圆角生成器

此交互式工具允许您以可视方式创建圆角(border-radius 属性)。