a11y.skipToMainContent
1

框阴影生成器

构建 CSS Box-shadow 视觉——调值偏移,模糊,分布,颜色,不透明,并带有活预览.

px
px
px
px
%

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Box Shadow Generator

  1. 调整X/Y偏移、模糊、分布、颜色、不透明等的滑动器.
  2. 切换内阴所入.
  3. 复制CSS系统.

{姓名}是什么来着?

为框阴影 CSS 光谱的每个属性提供滑板。 预览卡显示你影子的模样 完成后复制一行 CSS 。

Advertisement

FAQ

什么是传播半径?
正向扩散在模糊之前会长出阴影的大小;负向缩小. 将负扩散与净向阴影相抵消.
我能同时加入多个盒子阴影吗?
对 添加您喜欢的多少阴影层;它们被组合成一个单个逗号分隔的框-阴影 CSS 属性,您可以复制.
内置复选框是做什么的?
Inset 将阴影画入元素内部而不是外部,对您组件产生被压抑或被沉没的视觉效果.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement