CSS盒阴影生成器
用滑块精细调节盒阴影效果,实时预览并复制精确的CSS代码。
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
如何使用 CSS盒阴影生成器
- 拖动偏移、模糊和扩展滑块来调整阴影形状。
- 设置阴影颜色和不透明度,如有需要可切换内阴影模式。
- 将生成的box-shadow代码复制到你的样式表中。
关于 CSS盒阴影生成器
用滑块设计CSSbox-shadow阴影,效果满意后即可复制对应代码。你可以控制水平和垂直偏移,用来使阴影向左右或上下移动;还有模糊半径,用来柔化阴影边缘;以及扩展值,用来相对于盒子放大或缩小阴影。实时预览会随着你的拖动即时更新,因此每次调整都能立刻看到效果。
颜色方面,你可以单独选择阴影颜色并设置一个不透明度滑块,该工具会把两者合并为一个单一的rgba()值,因此一个20%不透明度的柔和灰色阴影看起来会很自然,而不是一块生硬的实色。内阴影开关可以将阴影从盒子外部切换到内部嵌入,这正是让输入框呈现凹陷感或按钮呈现按压效果的方法。
预览区域采用棋盘格背景,这是刻意为之的设计:它能让你真实地判断柔和的半透明阴影效果,就像它落在任何实际页面上的样子一样。有一点需要说明:它生成的是单层阴影,而不是多个用逗号分隔、叠加在一起的阴影,预览也只在一个普通方块上展示效果。可以搭配CSS渐变生成器一起使用,为盒子的背景同时设置样式。
常见问题
偏移、模糊和扩展分别控制什么?
偏移用于让阴影在水平和垂直方向上远离盒子。模糊用于柔化阴影边缘,模糊值越大,阴影就越弥散。扩展用于改变阴影大小,在应用模糊之前使其比盒子更大或更小。
阴影颜色是如何设置的?
你可以选择一种颜色并设置一个不透明度滑块,工具会将两者合并为一个rgba()值。这意味着你既能控制色调,也能控制阴影的透明程度,这正是让阴影看起来柔和自然,而不是一块生硬色块的关键。
内阴影选项有什么作用?
它会将阴影从盒子外部移到内部。外部阴影会让元素看起来像是从页面上浮起;内阴影则会让元素看起来凹陷或被按压下去,这对输入框、凹槽和按压状态的按钮很有用。
我可以一次创建多个阴影吗?
不可以。这款工具只生成单层阴影。CSS确实允许在一个元素上使用多个以逗号分隔的阴影,但你需要自行组合;该生成器一次只生成一行简洁的box-shadow代码。
为什么预览背景是棋盘格?
棋盘格背景便于判断柔和或半透明阴影的效果,因为你可以看到有多少背景透了出来。一个在白色背景上看起来正常的阴影,放在其他背景上可能会显得过重,而这种棋盘格图案能揭示这一点。