强大的 CSS 生成工具，涵盖盒阴影、Flexbox 布局、网格布局及单位换算。即时获取 CSS 和 Tailwind 代码。所有处理均在浏览器本地完成。
box-shadow: 4px 4px 8px 0px #00000040;Tool Notes is a Supporter feature.
在Box Shadow、Flexbox或单位转换器选项卡之间进行选择。
使用滑块和输入框配置CSS属性，实时预览效果。
将生成的CSS或Tailwind代码复制到剪贴板。
尝试常见模式的预设配置，然后从中进行自定义。
box shadow生成器可创建CSS box-shadow属性，支持自定义水平/垂直偏移、模糊半径、扩展和颜色。多个图层可叠加以实现复杂效果，如浮起的卡片或neumorphic设计。每个图层支持带alpha透明度的RGBA颜色和内阴影（inset）效果。该工具可生成标准CSS和Tailwind任意值。
配置flex容器属性（flex-direction、justify-content、align-items、flex-wrap、gap），并实时查看等效的CSS和Tailwind类。可视化构建器显示所选设置下元素的排列方式。支持所有现代flexbox属性，包括行/列方向、center/space-between对齐以及CSS Grid中引入的gap间距。
在绝对单位（px、pt）和相对单位（rem、em、vw、vh）之间相互转换。使用您指定的基础字体大小（默认16px）进行精确的rem/em计算。转换遵循W3C标准：1rem = 基础字体大小，1em = 父元素字体大小，1vw = 视口宽度的1%。适用于响应式设计和无障碍尺寸调整。
所有CSS生成完全在您的浏览器中使用JavaScript完成。您可获得纯CSS和Tailwind CSS两种输出（视情况而定）。生成的代码可直接投入生产使用，可直接粘贴到您的样式表中。不与服务器通信——工具加载后可完全离线使用。
该工具可生成box shadow（单层或多层）、flexbox布局（容器和子项属性），并在CSS单位（px、rem、em、%）之间进行转换。