盒阴影生成器

拖动滑块调整偏移、模糊、扩散和颜色,叠加多层做出立体阴影,CSS 代码实时生成,随时复制。

阴影图层
图层 1
CSS 代码
拖动滑块,调整你的阴影效果。

每一层阴影都在你的浏览器里渲染,这里设置的内容不会上传到 BroBroGo。

常见问题

偏移、模糊、扩散这几个值分别控制什么?

偏移决定阴影往哪个方向移动,模糊让边缘变柔和,扩散则在模糊之前把阴影撑大或收缩。扩散设成负值能让阴影往内收,适合做贴合边缘的紧凑阴影。

内嵌(inset)选项是做什么的?

普通阴影落在元素外侧,像卡片抬起时背后透出的光。打开内嵌后阴影会翻到元素内侧,让元素看起来像被按下去一样,适合做凹陷的输入框或按下状态的按钮。

为什么要叠加不止一层阴影?

尺寸大一点,单层阴影看起来就会很平。真正有立体感的效果通常是一层贴近、深色的阴影,叠加一层柔和、范围更大的阴影——加一层新的,分别调整两层的数值就能做出来。

渐变生成器生成线性、径向或锥形渐变,添加色标、调整方向,CSS 代码一键复制。圆角生成器拖动滑块分别调四个角的圆角,开椭圆模式还能捏出流动的异形(“blob”)形状,CSS 代码实时生成,随时复制。颜色转换器HEX、RGB、HSL、HSV、CMYK、LAB 之间互转,改任意一栏,其余几种实时更新。对比度检查器填入文字色和背景色,看它们的 WCAG 对比度,以及能过 AA、AAA 哪些等级。