CSS 元素样式工作台
选一个按钮、卡片、徽章或头像模板，在这个真实元素上同时调背景渐变、边框、圆角与多层阴影，即时预览并一次复制完整的 CSS 规则。
元素样式工作台怎么用
一个真实元素，四个属性叠在一起
单属性生成器只给你一个色块。这里的预览是带真实文字的按钮、卡片、徽章或头像，1px 边框、12px 圆角与两层阴影会一起被看见，就像它们在你的界面上的样子。关闭任一面板可以把该属性从输出移除，设置不会消失。
输出是一组 ruleset
CSS 面板依 background、border、border-radius、box-shadow 的顺序印在同一个 selector 里。阴影每层一行；透明度低于 100% 的颜色会写成 rgba()，粘贴就能用。把 .element 换成你组件的 selector 即可。
常见问题
关于这个主题的常见疑问与实用解答。
原本的渐变、阴影、圆角生成器去哪了？
它们就是这个工作台的四个面板。旧网址仍然可用，会直接开启对应面板展开的工作台；以前能生成的东西一个都没少。
阴影颜色为什么是十六进制色码加一个透明度滑块？
设计上通常把阴影想成「某个基色乘上某个强度」。把两者分开，你可以在多层之间沿用同一个色码、只改透明度；输出时会自动合成 rgba()。
会把数据传到服务器吗？
不会。预览与 CSS 都在你的浏览器计算；没有账号、不上传、也不保存历史。