这个工具有问题吗？

关于「CSS 渐变生成器（在线）」

该工具直观地构建 CSS 线性、径向和圆锥渐变。添加颜色停止点、选择方向或角度、设置透明度，工具生成匹配的 CSS 代码，可粘贴到您的样式表中。

渐变在现代 Web 设计中无处不在：英雄背景、按钮状态、卡片装饰和渐变文本。手工编写 CSS 渐变语法很繁琐——可视化编辑让您可以试验平滑过渡，而无需反复试错。

输出支持现代功能，如多个颜色停止点、百分比定位、不同色彩空间中的色调插值，以及用于圆形效果的圆锥渐变。可作为 CSS 或 Tailwind 实用类复制。

如何使用这个工具

如何拼出两段 linear-gradient 的 CSS

  1. 选择两个色标

    「Color 1」与「Color 2」接受任何 CSS 颜色：hex（`#1e3a8a`）、rgb（`rgb(30 58 138)`）、带 alpha 的 rgba 或颜色名（`navy`）。第一个色标在 0%，第二个在 100%。

  2. 设置角度

    「Angle (deg)」控制方向角。`0` 自下向上，`90` 从左到右，`180` 自上向下（CSS 默认），`45` 是经典对角。

  3. 点击运行

    结果只有 `css`：`linear-gradient(<angle>deg, <color1>, <color2>)`。直接作为 `background:` 或 `background-image:` 的值粘贴。

  4. 超过两段

    如需 radial、conic 或 3+ 色标，手动编辑输出——语法是 `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`。或改用更完善的渐变编辑器；本工具有意保持最小化，仅服务两段线性。

相似工具