CSS 生成器
Design CSS visually and copy the code — build gradients and box-shadows with a live preview, no guesswork.
关于 CSS 生成器
有些 CSS 属性几乎不可能凭空盲写。渐变和阴影是两个最糟糕的例子：语法把好几个值塞进一行，而其中任何一个的小改动都可能彻底改变结果。本类别正好有两个可视化构建器应对它们——CSS 渐变生成器和CSS 阴影生成器。你调整控件、看着实时预览更新，并在看起来合适时复制完成的规则。它面向前端开发者、设计师，以及任何在调整主题、宁愿看到结果也不愿去猜数字的人。
每当你需要一个不只是纯色的背景时——一个主视觉区块、一个按钮、一个卡片头部、一个让文字能可读地叠在图片之上的遮罩——就用渐变生成器。值得反复试验的部分是角度和每个色标的位置，因为移动一个色标正是把一个浑浊的混合变干净的方式。用阴影生成器来营造深度：需要显得抬起的卡片、下拉菜单、模态框和按钮。它有用的一课是：偏移、模糊和扩展做的是相当不同的事，而看起来可信的阴影通常比直觉所暗示的更柔和、更透明——大模糊配低不透明度读作光，而生硬的深色阴影读作一张贴纸。两个工具都产出你可直接粘进样式表的标准 CSS。
两个都免费、无需注册，并完全在你的浏览器中运行，所以你设计的任何东西都不会被上传，预览是即时的，而非往返一趟。你得到的是一条可复制的纯 background 或 box-shadow 声明——没有框架、没有依赖、没有署名注释。有两点值得知道：预览显示的是你自己的浏览器如何渲染该规则，所以任何关键的东西都要在其他浏览器里检查；而在许多元素上使用厚重的阴影或大面积渐变，可能在低端设备上损耗绘制性能。至于挑选你喂给渐变的颜色，颜色工具类别里有转换器、渐变生成器和对比度检测。
常见问题
生成的 CSS 在所有浏览器里都能用吗？
线性和径向渐变以及 box-shadow 在所有当前浏览器中都受支持，无需厂商前缀。你只有在面向真正老旧的浏览器时才需要带前缀的版本，而如今几乎没有项目会去兼容它们。如果你的项目要，请核对具体要求，而非想当然。
我能在商业项目中使用这些渐变和阴影吗？
可以。输出的是你用可视化编辑器写出的普通 CSS。没有任何东西需要授权、署名或标注。
为什么我的阴影在我的网站上看起来和预览不同？
通常是因为它周围的环境。阴影在彩色背景上和在白色背景上读起来不同，而且它可能被一个设置了 overflow hidden 的父元素裁剪，或被一个层叠顺序更高的同级元素遮住。规则本身是相同的。
我能添加多个阴影或超过两种渐变颜色吗？
CSS 两者都支持：box-shadow 接受一个逗号分隔的列表，而渐变接受任意多个色标。用不同的模糊叠加两三层阴影，正是实现最逼真深度的方式。